悬停另一个 div 后如何显示 div 元素？ [关闭]答案

【问题标题】：How I can showing div element after I hover another div? [closed]悬停另一个 div 后如何显示 div 元素？ [关闭]
【发布时间】：2014-12-16 15:12:34
【问题描述】：

我有这个 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)，它不会消失，并且只有在我'把鼠标从这个街区拿走？

【问题讨论】：

如果您有相关的HTML和CSS，我们需要查看。
如果您使用 jQuery，为什么不使用 .toggle() 或 .hide() 和 .show() 而不是 .css('display', 'block')？
保持鼠标悬停在元素上使用 CSS ...menu_popup:hover{display:block} 无论你的 menu_popup 元素是什么

标签： javascript jquery html css

【解决方案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/

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

【讨论】：

【解决方案2】：

如果你想使用jQuery方式：

测试元素是否悬停

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

【讨论】：