Question

我有一个菜单链接，当它悬停时，会在其下显示div＃选项。问题是我想在鼠标离开时再次隐藏#options，但是当它离开链接元素时也是如此。

我认为最好的方法是：在链接的悬停功能上，查看光标是否位于#options之上，如果是，则返回false，否则继续隐藏它。

像这样的东西

 $('#menu-link').hover(function() {
        $('#options').slideDown()
    }, function() {
        // Perhaps only do this if mouse is NOT on top of #options?
        $('#options').slideUp()
    });

但是如何检测光标所在的元素？

或甚至，有更好的方法吗？

非常简单的jsfiddle描述了这里： http://jsfiddle.net/N6kwn/5/

Answer 1

......甚至，有更好的方法吗？

是的，但你需要稍微改变你的标记。这是我能想到的最干净的方式：

HTML：

<ul id="options">
  <li><a href="">A menu link</a>
    <ul>
      <li><a href="">Option A</a></li>
      <li><a href="">Option B</a></li>
      <li><a href="">Option C</a></li>
    </ul>
  </li>
</ul>

CSS：

#options,
#options ul {
  float: left;
  list-style: none;
  padding: 0;
  background: black;
}
#options a {
  display: block;
  text-decoration: none;
  color: yellow;
  padding: .5em 1em;
}
#options ul {
  position: absolute;
  display: none;
  min-width: 200px;
}

JavaScript的：

$('#options').hover(function(){
  $(this).find('ul').stop(1).slideToggle();
});

演示： http://jsbin.com/ehalon/1/edit

Answer 2

您只需移动结束</div>标记，以便子菜单包含在菜单中...

http://jsfiddle.net/N6kwn/6/

Answer 3

请参阅http://api.jquery.com/category/events/mouse-events/

具体来说：鼠标悬停，mouseout

检测光标下的元素

3 个答案: