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

更简单的方法就是让父<div>上的.hover()像这样：

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

由于您实际上只希望在<span>上悬停<div>时（<img>最初只能看到<div>）...更有意义的是坚持你的处理程序在那里，你看到代码变得多么简单:)我只是给那个{{1}}一些你可以在选择器中使用的类（使它更具体）并且你已经完成了设置。

Answer 2

以下是对您所描述内容的尝试

http://www.jsfiddle.net/gaby/cQxVv/

但@Nicks解决方案更优雅。

jquery如果鼠标悬停

2 个答案: