jQuery，如果鼠标悬停 [英] jquery if mouseover

问题描述

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

I have a img with a hover function to reveal an element. Some of this new element overlaps the img so if I then hover over the new element, because the cursor is no longer over the img, the element hides itself and then instantly reappears because the cursor is over the img again. I need to somehow ignore the mouseout command if the cursor is over the img which is within the new element (the only part of the new element which is overlapping the main image).

要解释这是一个棘手的问题，但这是代码:

It's a tricky one to explain but here's the code:

jquery(有点不确定我怎么做)

jquery (with bit i'm not sure how to do)

$("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>

推荐答案

一种简单得多的方法是使用像这样在该父级<div>上的.hover() :

A much easier approach would be just having the .hover() on that parent <div> like this:

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

由于您实际上只想在将鼠标悬停在<div>上时会影响<span>(最初仅显示<img>)...将处理程序留在此处更加有意义，因此您会看到多少代码变得更简单了:)我只给<div>一些可以在选择器中使用的类(使其更具体)，就全部设置好了.

Since you effectively only want to affect the <span> when hovering over the <div> (in which only the <img> is initially visible)...it makes more sense to stick your handler there, you see how much simpler the code gets :) I'd just give that <div> some class you can use in a selector (to make it more specific) and you're all set.

这篇关于jQuery，如果鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！