忽略重叠 div 的鼠标事件

Question

一个页面有 4 个 div：

1. 项目 A
2. 项目 B
3. 项目 C
4. 详细信息（隐藏）

所需的效果是，当鼠标悬停在项目框上时，将显示详细信息框，而在鼠标移开后隐藏。显示时，详细信息框将与项目框右侧约 20% 重叠。

然而，我当前得到的错误效果是，当我将鼠标悬停在任何项目框的右边缘时，它会进入显示和隐藏详细信息框的永久循环。大概这是因为它触发了项目框的 mouseout 事件（当显示详细信息时），但当隐藏详细信息框时立即再次触发鼠标悬停事件。我想知道如何解决这个问题。

我当前的代码是：

$('div.item').hover(
    function() {
        $(this).showDetails();
    },
    function() {
        $(this).hideDetails();
    }
);

提前感谢您的指点！ 这是 jsfiddle 链接，供无法想象的人使用。尝试将鼠标悬停在右侧的项目框上，然后稍微移动鼠标，您将看到闪烁。

http://jsfiddle.net/s6CjP/1

Xavier，我已经尝试过使用appendTo获取详细信息框，但我想要的效果是我希望鼠标事件仅针对可操作的 div（即 Item）。经过一番研究后，我什至非常确定这是否可能，因为“详细信息”框覆盖了 div（因此无法将事件附加到其下方的某些内容）

Answer 1

一种解决方法是让详细信息 DIV 成为您将鼠标悬停在其上的项目的子项。这样，当指针位于详细信息 DIV 上时，指针仍然位于正确的项目“内部”，并且在鼠标离开两个 DIV 之前不会发送 mouseout。您至少可以通过两种方式做到这一点：

1. 为每个项目 DIV 提供一个单独的详细信息 DIV（无论如何，它们都会有不同的详细信息，对吧？）。
2. 将详细信息 DIV 从 DOM 中拉出，并将其附加到 showDetails() 函数中的正确项目 DIV 中。

您必须执行一些 CSS 技巧才能使其按您想要的方式显示，但只要存在父子关系，您就不必担心错误的鼠标事件。

希望这有帮助！

Answer 2

我无法想象你的问题。目前尚不清楚详细信息框是否在所有情况下看起来都相同，以及页面上的项目 div 位于何处以及彼此之间的关系。

请您为其创建一个 JSFiddle 并在其中粘贴一些 CSS、HTML 和 JS。那我可以看一下。

Answer 3

试试这个：

我想这就是您要寻找的：

HTML：

<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item A</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item B</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item C</div>
<div id="divMove" style="width:100px;height:100px;background-color:#D9E9D0;display:none">
</div>

JAVASCRIPT：

$(".divItem").mousemove(function(e){
    var left  = e.pageX + 10 + "px";
    var top  = e.pageY + 20 + "px";

    $("#divMove").show().css("top",top).css("left",left).css("position","absolute");
}).mouseout(function(){
    $("#divMove").hide();
   }).mouseenter(function(){
        $("#divMove").text($(this).text());    
});

点击此处查看示例

Answer 4

Nando，那里有一些更好的答案，但我只是想把它放在那里，尽管我确信你已经尝试过。

特别是因为您正在使用悬停（），听起来有点像您遇到了一个非常简单的问题。

我确定您尝试过 stop(true, true) 对吗？

//
$('div.item').hover(
    function() {
        $(this).stop(true, true).showDetails();
    },
    function() {
        $(this).stop(true, true).hideDetails();
    }
);
//