0

我有一个菜单链接，当悬停时，它会在它下面显示一个 div#options 。问题是我想在鼠标离开 #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/

4

3 回答 3

2

...甚至，有没有更好的方法来做到这一点？

是的，但是您需要稍微更改一下标记。这是我能想到的最干净的方式：

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

于 2013-01-03T16:26:19.217 回答
1

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

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

于 2013-01-03T16:20:18.537 回答
0

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

具体来说：鼠标悬停，鼠标悬停

于 2013-01-03T16:18:44.383 回答