Форум

vettel · #1 (**permalink**) 09.11.2015, 22:11

Здравствуйте.
Есть вот такая обычная кнопка, при наведении на нее выпадают другие, более мелкие кнопки.
До наведения:

После:

В общем, ничего сложного вроде как, но сложность появилась. При уходе мышки с основной кнопки (с плюсом) я еще не успеваю навести на более мелкие, как все пропадает.
Изначальный код такой:

$('.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 пробовал, но все как-то криво. Должно же быть какое-то нормальное решение.
Буду благодарен.

рони · #2 (**permalink**) 09.11.2015, 22:50

vettel,
нужен макет

laimas · #3 (**permalink**) 10.11.2015, 02:07

<!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>

Форум

Справочник

Discord чат

Курсы javascript