Jquery 忽略重叠div的鼠标事件

一个页面有4个分区：

项目A

B项

项目C

详细信息（隐藏）

理想的效果是，将鼠标悬停在项目框上时，将显示“详细信息”框，鼠标悬停后将隐藏该框。显示时，“详细信息”框将与项目框右侧的20%左右重叠

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

我目前的代码是：

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

提前感谢您的指点！ 这里有一个JSFIDLE链接，供任何不能将其可视化的人使用。尝试将鼠标悬停在右侧的项目框上，然后稍微移动鼠标，您将看到闪烁

---

Xavier，我已经尝试在details框中添加appendTo，但是我想要的效果是，我希望鼠标事件只针对actionable div（即Item）。经过一些研究后，我甚至非常确定这是否可行，因为详细信息框覆盖了div（因此无法将事件附加到它下面的内容）

我很难想象您的问题。不清楚详细信息框是否在所有情况下看起来都相同，页面上的项目div在哪里，以及它们之间的关系

---

请你能为它创建一个网页，并粘贴一些CSS，HTML和JS在那里。然后我可以看一看。

一个解决方法是将details DIV作为您悬停的项目的子项。这样，指针在details DIV上时仍然“在”正确的项目中，并且直到鼠标离开两个DIV时才会发送mouseout。您至少可以通过两种方式实现此目的：

对于每个项目DIV都有一个单独的细节DIV（不管怎样，它们都有不同的细节，对吗？）

将details DIV从DOM中拉出，并将其附加到showDetails（）函数中正确的item DIV中

你需要做一些CSS技巧才能让它像你想要的那样显示出来，但是只要存在父子关系，你就不必担心错误的鼠标事件

希望这有帮助

试试这个：

我想这就是你想要的：

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>

$(".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());    
});

---

南多，上面有一些更好的答案，但我只想把这个扔上去，尽管我相信你已经试过了

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

我肯定你试过停止（真的，真的）对吗

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