.btn{
position: relative;
}
.hide{
display: none;
}
.btn ul{
/* display: none;*/
position: absolute;
top: 200%;
}
.btn:hover ul{
/* display: block;*/
}
jQuery(function($){
moveTimer = 0;
hideTimer = 0;
$('.btn').hover(function () {
menu = $(this).find('ul');
$(this).on('mousemove', function(){
clearTimeout(moveTimer);
clearTimeout(hideTimer);
moveTimer = setTimeout(function(){
menu.removeClass('hide')
}, 100);
});
},function(){
menu = $(this).find('ul');
clearTimeout(moveTimer);
hideTimer = setTimeout(function(){
menu.addClass('hide')
}, 500);
});
});
【Js】遅延式のドロップダウンメニュー
2020/02/07