jquery - Jquery mouseleave 元素不需要的行为

Question

我正在尝试创建一个简单的 jquery 菜单但遇到问题。这是我的脚本：

<script>
$(function(){
$('#tm-u, #tm-e, #tm-n').click(function(){
 $( '#topmenu' ).css('display', 'block');
});
$('#topmenu').mouseleave(function(){
 $(this).css('display', 'none');
});
});
</script>

我的html结构是这样的：

<div id="login">
<a href="#tm-u">1</a>
<a href="#tm-e">1</a>
<a href="#tm-n">1</a>
</div

<div id="topmenu">
stuff
</div>

问题是顶部菜单出现在登录元素下（使用z-index），因为我希望菜单出现在它下面并保留登录按钮的功能以更改“顶部菜单”内的内容。

但是使用mouseleave，只要光标进入登录元素，顶部菜单就会关闭，我希望它保持打开状态。

所以换句话说，我希望 topmenu 元素保持可见，即使您将鼠标悬停在其上方的登录元素上。

我怎样才能做到这一点？我尝试使用此代码，但它不起作用：/

$('#login').mouseenter(function(){
if ($('#topmenu').is(':visible')) {
alert('h');
$( '#topmenu' ).css('display', 'block');
};
});

Answer 1

一个好的解决方案是更改您的标记，并包装两个元素（#login和#topmenu）。然后将mouseleave处理程序绑定到其父级。

HTML：

<div class="loginWrapper">
  <div id="login">
    <a href="#tm-u">1</a>
    <a href="#tm-e">1</a>
    <a href="#tm-n">1</a>
  </div>

  <div id="topmenu">
    stuff
  </div>
</div>

JS：

$('.loginWrapper').mouseleave(function(){
  $('#topmenu').css('display', 'none');
});

这样，您的鼠标将不得不离开包装，以及所有的孩子，才能开火。

Answer 2

这看起来像一个 CSS 问题。

尝试这个...

#topmenu:hover,
#login:hover + #topmenu {
  display: block;
}