Появление элементов меню при наведении
Здравствуйте.
Есть вот такая обычная кнопка, при наведении на нее выпадают другие, более мелкие кнопки. До наведения: ![]() После: ![]() В общем, ничего сложного вроде как, но сложность появилась. При уходе мышки с основной кнопки (с плюсом) я еще не успеваю навести на более мелкие, как все пропадает. Изначальный код такой: $('.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, время: 06:08. |