Question

我有这个jQuery代码：

menu_btn.hover(function(){
   menu_popup.css('display', 'block');
},function(){
   menu_popup.css('display', 'none');
});

在我将鼠标悬停在menu_btn之后，我的下一个div（menu_popup）正在显示。但是，当我将鼠标悬停在menu_popup上后，menu_popup消失了。

如何确保当我将鼠标悬停在按钮（menu_btn）上时，我会显示菜单，在我将鼠标移动到菜单（menu_popup）后，它不会消失，并且会消失只有我从这个区块中取出鼠标？

Answer 1

你可以在没有JS的情况下使用纯css来解决这个问题。

HTML

<div id="button">
    hover me
</div>
<div id="my-menu">
    my menu
</div>

CSS

#my-menu, #button{
    padding: 5px;
    border: 1px solid #000;
}
#my-menu{
    display: none;
}
#button:hover + #my-menu,
#my-menu:hover{
    display: block;
}

这是一个JSFiddle：http://jsfiddle.net/p8pqquc9/

如果菜单不在按钮的旁边且您必须离开：悬停状态，则此解决方案会出现问题。在这种情况下，唯一的解决方案是使用js设置超时或使用onclick事件。

Answer 2

如果你想使用jQuery方式：

测试元素是否悬停

var isHovered = menu_popup.is(":hover"); // returns true or false
if(!isHovered) {
  //hide menu_popup
}

我在悬停另一个div后如何显示div元素？

2 个答案: