1

很抱歉，如果这已被回答，但我找不到答案..

我所拥有的是一个带有一些链接的 DIV。我想要它做的是在鼠标在它上面时显示，但在鼠标离开它时淡出（DIV）。唯一的问题是，只要鼠标点击其中的链接，DIV 就会淡出。那么有没有办法让它意识到链接也是 DIV 的一部分，或者最好的解决方案是什么？

这是当前代码：

jQuery

$("#hoverbox").mouseover(function() {
    $("#hoverbox").fadeOut();
    $("#sub-menu").fadeIn("slow");
});

$('#sub-menu').mouseout(function() {
  $("#sub-menu").fadeOut();
  $("#hoverbox").fadeIn();
});

HTML

<div id="sub-menu">
<a href="test.html">test</a>
</div>
<div id="hoverbox"></div>

我不能是唯一一个遇到这个问题的人，所以我很可能在这里错过了一些非常基本的东西。

4

2 回答 2

0

问题是您使用了错误的事件，您想使用mouseleave而不是mouseout，请查看以下可以使用的事件列表：

mouseenter / mouseout
mouseover / mouseleave

您已经了解了两对之间的区别（包括或不包括内部元素），并且您正在混合两组。

因此，您只需要更改以下行：

$('#sub-menu').mouseout(function() {

对于这个：

$('#sub-menu').mouseleave(function() {

请参阅工作演示。

于 2012-11-06T09:19:07.113 回答
0

这接近你想要的吗？

$("#hoverbox").mouseenter(function() {
    $("#hoverbox").hide("slow");
    $("#sub-menu").show("fast");
});

$('#sub-menu').mouseleave(function() {
   $("#sub-menu").hide();
   $("#hoverbox").show();
});​

演示在这里：http: //jsfiddle.net/UTaFL/

在这里使用 mouseenter 和 mouseleave 更好，因为它们忽略子元素并且只寻找鼠标进入/离开指定元素的边界。

我还更改了fadeIn 和fadeOut，因为它们可能会导致问题，因为它们能够在页面上实际可见之前调用mouseenter 和mouseleave（以及mouseover 和mouseout）事件。

于 2012-11-06T09:25:34.930 回答