проблема при создании кнопки с большим количеством делений - PullRequest
Новая
       1

проблема при создании кнопки с большим количеством делений

5 голосов
/ 18 августа 2011

screenshot

Это меню, которое я пытаюсь построить. Теперь я в замешательстве и не могу понять, как это сделать.

Один div (синяя стрелка) нуждается в отрицательном поле, чтобы выйти за пределы поля, другой div - для синего фона кнопки, а внутри кнопки - еще два div или интервала для цветов текста. Но при наведении они должны выглядеть одинаково (белого цвета).

Я много раз пытался его построить, но мне не удалось. Я получаю некоторые ошибки при загрузке. Может быть, ему нужен какой-нибудь jquery-код, но я очень новичок в этом и не знаю, что делать.

Я работаю локально и не могу дать ссылку, чтобы показать это, но есть изображение того, что я хочу сделать.

Надеюсь, вы меня понимаете, потому что мой английский не очень хороший.

Ответы [ 2 ]

3 голосов
/ 18 августа 2011

См .: http://jsbin.com/ihugut

Это работает во всех современных браузерах и IE8 + (в IE7 это заметно ухудшается).

(edit: оказалось, что это должно прекрасно работать в IE7, поэтому посмотрите конец моего ответа на это решение)

Единственная проблема, которая может у вас возникнуть, заключается в том, что я стремился сохранитьHTML настолько прост, насколько возможно, CSS сложен, поэтому может быть сложно вносить изменения.

HTML: 

<ol id="menu">
    <li><a href="#">Ballina g</a></li>
    <li><a href="#">Konferenca g</a></li>
    <li><a href="#">Folesit g</a></li>
</ol>

CSS: 

body {
    margin: 50px;
    background: #aaa
}
#menu {
    list-style: none;
    counter-reset: num;
    background: #444;
    float: left;
    margin: 0;
    padding: 12px 0 0 0;
    font: bold 19px sans-serif
}
#menu li {
    margin: 0 0 12px 0;
    float: left;
    clear: both;

}
#menu a {
    counter-increment: num;
    padding: 3px 15px 3px 50px;
    float: left;
    position: relative;
    color: #0cf;
    text-decoration: none
}
#menu a:hover {
    color: #fff
}
#menu a:before {
    content: counter(num, decimal-leading-zero);
    color: #ccc;
    position: absolute;
    left: 21px;
    font-weight: normal
}
#menu a:hover:before {
    color: #fff;
}
#menu li:hover {
    background: #0cf;
    margin-left: -5px;
    margin-right: 5px
}
#menu li:hover a {
    left: 5px
}
#menu a:hover:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: -15px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 10px solid #0cf
}

Вот версия, которая полностью работает в IE7: http://jsbin.com/ihugut/3

HTML-код должен быть defiled : 

<ol id="menu">
    <li><a href="#"><span>01</span>Ballina g<span class="arrow"></span></a></li>
    <li><a href="#"><span>02</span>Konferenca g<span class="arrow"></span></a></li>
    <li><a href="#"><span>03</span>Folesit g<span class="arrow"></span></a></li>
</ol>
2 голосов
/ 18 августа 2011

Похоже, у вас есть хорошее представление о том, что вы хотите сделать.Если я правильно понимаю, ваша проблема - все, что становится белым при наведении курсора.

Должен быть один div, который содержит все остальные, вы можете изменить его дочерние элементы при наведении курсора без использования Javascript следующим образом.например, у вас есть этот HTML-код: 

<div class="parent">

    <span class="child_black">I'm black</span>
    <span class="child_red">I'm red</span>

</div>

Вы можете использовать следующий CSS-код, чтобы изменить цвет обоих дочерних элементов на белый при наведении:1013 * Вы можете использовать ту же технику, чтобы показать и скрыть синюю стрелку слева.

Для цвета это тоже подойдет, но не для стрелки: просто ради альтернативы, я бы не рекомендовал это 

.parent:hover {
    color: #fff !important;
}
...