Появление элементов меню при наведении
Здравствуйте.
Есть вот такая обычная кнопка, при наведении на нее выпадают другие, более мелкие кнопки. До наведения: ![]() После: ![]() В общем, ничего сложного вроде как, но сложность появилась. При уходе мышки с основной кнопки (с плюсом) я еще не успеваю навести на более мелкие, как все пропадает. Изначальный код такой:
$('.add-menu-button').hover(function(){
$('.add-menu').fadeToggle(200);
});
<a href="" class="add-menu-button"> </a> <div class="add-menu"> <a href="#light_add" class="light-menu"></a> <a href="#auto_add" class="auto_add-trigger modal-trigger auto-menu"></a> </div> Пробовал различные варианты, и обработчики событий перевешивал на другие элементы, и варианты с тупой задержкой типа setTimeOut пробовал, но все как-то криво. Должно же быть какое-то нормальное решение. Буду благодарен. |
vettel,
нужен макет |
<!DOCTYPE HTML>
<html>
<head>
<style>
.b1 {
position: relative;
margin-top: 160px;
}
.b1, .b2, .b3 {
width: 66px;
height: 66px;
background: url(data:image/gif;base64,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) 0 0;
}
.b1:hover .b2 {
bottom: 66px;
}
.b1:hover .b3 {
bottom: 132px;
}
.b2, .b3 {
position: absolute;
left: 0;
bottom: 0;
transition: bottom .3s ease-in;
z-index: -2;
}
.b2 {
background-position: 0 -66px;
z-index: -1;
}
.b1 {
background-position: 0 -132px;
}
</style>
</head>
<body>
<div class="b1"><div class="b2"></div><div class="b3"></div></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:33. |