忽略重叠div的鼠标事件-Java 学习之路

一个页面有4个div：

项目A.
项目B.
项目C.
细节（隐藏）

所需的效果是，将鼠标悬停在“项目”框上时将显示“详细信息”框，并在鼠标移除后隐藏 . 显示时，“详细信息”框将与“项目”框右侧的约20％重叠 .

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

我目前的代码是：

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

提前感谢任何指针！这是任何无法想象它的人的jsfiddle链接 . 尝试将鼠标悬停在右侧的“项目”框上，然后稍微移动鼠标，您将看到闪烁发生 .

http://jsfiddle.net/s6CjP/1

Xavier，我已经尝试过appendTo的详细信息框，但我想要的效果是我想让鼠标事件只针对可操作的div（即Item） . 经过一些研究之后，我甚至非常确定这是否可行，因为“详细信息”框覆盖了div（因此无法将事件附加到其下方）

4 回答

0
一个解决方法是让细节DIV成为您在细节DIV上的项目的子项，并且在鼠标离开两个DIV之前不会发送mouseout . 你至少可以用两种方法做到这一点：
- 每个项目DIV都有一个单独的详细信息DIV（无论如何它们都有不同的细节，对吧？） .
- 将详细信息DIV从DOM中取出并将其附加到showDetails（）函数中的正确项目DIV .
你必须做一些CSS技巧才能让它像你想要的那样显示，但只要父子关系存在，你就不必担心错误的鼠标事件 .

希望这可以帮助！
回复于 2024-04-28T12:57:42+08:00
0

我无法直观地查看您的问题 . 它不清楚详细信息框在所有情况下是否看起来相同，页面上的项目div在哪里，以及彼此之间的关系 .

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

回复于 2024-04-28T12:57:42+08:00

试试这个：

我想是你在找什么：

HTML:

<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item A</div>


<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item B</div>


<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

回复于 2024-04-28T12:57:42+08:00

1
Nando，那里有一些更好的答案，但我只想把它扔到那里，虽然我确信你试过了 .

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

我敢肯定你试过停止（真的，真的）吧？
```
//
$('div.item').hover(
    function() {
        $(this).stop(true, true).showDetails();
    },
    function() {
        $(this).stop(true, true).hideDetails();
    }
);
//
```
回复于 2024-04-28T12:57:42+08:00

忽略重叠div的鼠标事件

4 回答

相关问题