鼠标离开一级菜单二级菜单延迟消失

解决鼠标离开一级菜单后二级菜单立即消失的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;
}