解决鼠标离开一级菜单后二级菜单立即消失的bug。
效果
-
before
before -
after
after
方法
<div class="left">hover</div>
<div class="right"></div>
.left {
float: left;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
background-color: #ff5566;
cursor: pointer;
}
.right {
display: none;
float: left;
width: 200px;
height: 300px;
margin-left: 30px;
background-color: #ff6600;
cursor: pointer;
}
法一：setTimeout
设置定时器，在鼠标离开$('.left')后，开启定时器，延迟$('.right')的消失，当鼠标悬停在$('.right')时，关闭定时器。
var timer = null;
$('.left').hover(function(){
$('.right').show();
},function(){
timer = setTimeout(function(){
$('.right').hide();
},1500)
})
$('.right').hover(function(){
clearTimeout(timer);
},function(){
$(this).hide();
})
法二：透明边框，无缝连接
设置$('.left')的border-right为透明边框，与$('.right')实现无缝连接。
如图：
transparent-border
.left {
float: left;
width: 100px;
height: 35px;
border-right: 30px solid transparent;
color: #fff;
line-height: 35px;
text-align: center;
background-color: #ff5566;
background-clip: content-box;
cursor: pointer;
}
.right {
float: left;
display: none;
width: 200px;
height: 300px;
background-color: #ff6600;
cursor: pointer;
}
.left:hover+.right,
.right:hover {
display: block;
}
