忽略鼠标事件重叠的div

项A
项B
项C
详细信息（隐藏）

所需的效果是将鼠标悬停在项目框上时将显示详细信息框，并且一旦被隐藏就会隐藏。在显示时，“详细信息”框将与“项目”框右侧的大约20％重叠。

不过，我发现了当前错误的效果是，当我将鼠标悬停只是任何的项目框的右边，它进入的显示和隐藏的细节箱的永恒循环。大概是因为它触发了Item框的mouseout事件（当Details被显示时），但是当Details框被隐藏时立即再次触发mouseover事件。我想知道如何解决这个问题。

我当前的代码是：预付的任何指针

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

谢谢！这里是jsfiddle链接，任何人都无法想象它。尝试将鼠标悬停在右侧的项目框上，稍稍移动鼠标，您将看到闪烁发生。

http://jsfiddle.net/s6CjP/1

泽维尔，我已经尝试过appendTo的细节中，但我想要的效果是，我想有仅指定可操作格（即项目）的鼠标事件。经过一番研究，我甚至不太清楚，如果这是可能的，因为详细信息框覆盖我无法可视化你的问题的股利（因此不能够将事件附加的东西在它下面）

来源

2011-02-02 Nando

。它不清楚细节框在所有情况下看起来是否相同，以及页面上的项目div是什么，以及相互之间的关系。

请您可以创建一个JSFiddle它粘贴在那里一些CSS，HTML和JS。然后我可以看看。

来源

2011-02-02 01:12:38 seamusjr

一种解决方法是将有细节DIV是你要悬停在该项目的子项。这样的指针仍然是“在”正确的项目时，它在细节DIV，并且不发送鼠标移出，直到鼠标离开都资料核实。你至少可以通过两种方式做到这一点：

有一个单独的细节DIV为每个项目的DIV（他们都会有不同的细节，对不对？）。
猛拉细节DIV出的DOM，并追加到您的showDetails（正确的项目DIV）功能。

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

希望这会有所帮助！

来源

2011-02-02 01:16:28

试试这个：

我觉得是找什么年为：

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

CLICK HERE TO SEE THE SAMPLE

来源

2011-02-02 08:16:38 Sukhjeevan

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

特别是因为你使用的是hover（），这听起来有点像你遇到了什么可能是一个非常简单的问题。

我敢肯定你试过停止（真的，真的）吧？

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

来源

2011-02-02 16:40:51

忽略鼠标事件重叠的div

回答

相关问题