Javascript Jquery检测将鼠标悬停在元素上，但不悬停在元素内容上

以下是我正在使用的页面：

我想这样，当你将鼠标悬停在图像显示的行上，当你离开图像显示的行时，但是因为（我认为）图像在hover div中，所以当你将鼠标悬停在行外但在图像上时，图像保持可见

我试图将图像移出悬停div，但它导致了一些可怕的闪烁，因为当您的鼠标悬停在图像上方时，您不再位于悬停div上方

---

有办法吗？谢谢。

实际上，我建议不要这样做。我认为直观的做法是，当您将鼠标悬停在数字/文本上时，图像会弹出，但在图像中移动鼠标不应该做任何事情

---

将图像向右移动一点，使大数字至少部分可见，怎么样？然后，移动到下一张图片会感觉很自然。

使用

类“music\u row”

获取

div的高度。如果鼠标y位置（在
mousemove
上）高于计算的高度，则隐藏
图像

$(document).ready(function() {
    var iHeight = $(".music_row").height();  
    $(".music_wrapper")
        .mouseover(function() {
            $(this).find('.image').show();
        })
        .mousemove(function(o) {
            if (o.layerY > iHeight) {
                $(this).find('.image').hide();
            }
        })
        .mouseout(function() {
            $(this).find('.image').hide();         
        });
});

另请参见my.
，因为图像是绑定处理程序的元素的子元素，它将防止触发mouseout事件，除非指针也离开容器，
.music\u wrapper

为了解决这个问题，您可以创建一个绝对定位的“ghost”元素，不透明度为零，并使用它来触发悬停事件。大概是这样的：

$(function() {
    $('.music_wrapper').each(function() {
        var ghost = $(this).find('.music_row').clone();
        ghost.css({opacity: 0, position: 'absolute', overflow: 'hidden' });
        ghost.hover(
            function() { $(this).parent().find('img').show(); },
            function() { $(this).parent().find('img').hide(); }
        );
        $(this).append(ghost);
    });
})

未测试，但这应该在每个
.music\u wrapper
中重新创建
.music\u row
div元素，设置一些css属性，绑定悬停处理程序并将其附加到wrapper元素

现在图像和悬停元素被分离，即使鼠标仍在图像上方，也可以隐藏图像。
Hmm。。我不太清楚你想做什么。你能重新描述一下你的问题吗？如果你将鼠标悬停在一个数字上，图像会显示出来，然后将鼠标移到下一个数字，图像不会消失。我想要的是隐藏的图像和显示的下一行图像。它的工作原理就像你说的那样，如果你越过数字01，你直接将鼠标移动到数字02—（至少对我来说，数字01的图像一直保持在那里——效果很好，我刚刚开始尝试类似的方法，但会花我几个小时！谢谢！