不悬停时触发事件

Question

当用户将鼠标悬停在其中一个菜单元素上时，我隐藏了div。我为此目的使用此代码

jQuery("#menu-item-15").hover(function(){
jQuery(".bootom-menu").css("display", "none");
});

但是当用户不会在此特定菜单元素上悬停（取消悬停）时，我想显示bootom-menu div。

Answer 1

这段代码最终对我有用。这是我对此有所了解的参考链接。 jquery un-hover

jQuery(function(){
jQuery("#menu-item-15").hover(function(){
jQuery(".bootom-menu").css("display", "none");
}, function(){
 // change back
jQuery(".bootom-menu").css("display", "block");
});
});

这段代码非常适合我。

Answer 2

悬停功能接受处理进/出事件的功能。

示例：

$('#element').hover(
    function(){ 
        /* hover handle */ 
    }, function(){
        /* un-hover handle */ 
    }
);

来源：https://api.jquery.com/hover/

Answer 3

如果您的目标是儿童或下一个兄弟元素，只需使用CSS

#menu-item-15:hover .bootom-menu{
    display: none;
}

Answer 4

只需使用切换：

HTML

<div id='menu_element'>MENU ELEMENT</div><br><br><br><div id='bottom_menu'>BOTTOM MENU DIV</div>

CSS

#menu_element, #bottom_menu {
  background: steelblue;
  padding: 20px;
  text-align: center;
  color: white;
  font-family: arial;
  display: inline-block;
  cursor: pointer;
}

<强> Jquery的

$("#menu_element").hover(function(){
$("#bottom_menu").toggle();
});

结果：