javascript - jquery 如果鼠标悬停

Question

我有一个带有悬停功能的 img 来显示元素。其中一些新元素与 img 重叠，因此如果我将鼠标悬停在新元素上，因为光标不再位于 img 上，该元素会隐藏自身，然后立即重新出现，因为光标再次位于 img 上。如果光标位于新元素内的 img 上(新元素与主图像重叠的唯一部分)，我需要以某种方式忽略 mouseout 命令。

解释起来很棘手，但代码如下:

jquery(有点我不知道该怎么做)

$("div > img").hover( function() {

        $(this).parent().find("span").slideDown(100);

    }, function() {

        if (user is hovering over the span) {
                    // do nothing
        } else {
            $(this).parent().find("span").slideUp(100);
        }
    });

html

<div>
    <img src="/images/icons/dm.jpg" width="54" height="54" />
    <span><strong>Test</strong><br />test2<img src="/images/arrow.png" width="19" height="17" /></span>
</div>

Answer 1

更简单的方法就是使用 .hover() 关于那个 parent <div>像这样:

$("div").hover(function() {
    $(this).find("span").slideDown(100);
}, function() {
    $(this).find("span").slideUp(100);
});

因为您实际上只想影响 <span>当鼠标悬停在 <div> 上时(其中只有 <img> 最初可见)...将处理程序放在那里更有意义，您会看到代码变得多么简单:)我只是给出 <div>您可以在选择器中使用一些类(以使其更加具体)，然后就一切准备就绪。