Question

这是jQuery函数，当我使用这个函数时，它将所有div应用于类.check，我想只应用悬停div而不是全部。

<script type='text/javascript'>
    $(document).ready(function(){
        $('.pop').hover(function(){
            $('.check').animate({opacity: 'show'});
        }),
        $('.pop').mouseout(function(){
            $('.check').animate({opacity: 'hide'});
        })
    });
</script>

这是函数#pop的html代码是父级，它是子级.check

<div class="pop">
    <div class="check">
    </div>
</div>

<div class="pop">
    <div class="check">
    </div>
</div>

这是css代码

.pop {
    clear:both;
    float:left;
    margin-bottom:20px;
    width:100px;
    height:100px;
    border:solid 1px green;
    position:relative;
}

.check {
    background:red;
    position:absolute;
    width:100px;
    height:100px;
    display:none;
    top:0;
    left:0;
}

当我使用这个代码jQuery函数应用所有。检查div，我只想申请一个div。仅在悬停时检查

Answer 1

您定位所有这些 - 您只需要当前悬停容器中的那个：

$(document).ready(function() {
    $('.pop').mouseenter(function() {

        // I've thrown in stop() - see http://api.jquery.com/stop/
        $(this).find(".check").stop().animate({
            opacity: 'show'
        });
    });
    $('.pop').mouseleave(function() {
        $(this).find(".check").stop().animate({
            opacity: 'hide'
        });
    });
});

Demo.

p.s。，我赞成这种更简洁的方法：

$(document).ready(function() {
    $('.pop').hover(function() {
        $(this).find(".check").fadeToggle()
    });
});

Demo.

Answer 2

尝试将上下文应用于检查类的查询

<script type='text/javascript'>
    $(document).ready(function(){
        $('.pop').hover(function(){
            $('.check', this).animate({opacity: 'show'});
        }),
        $('.pop').mouseout(function(){
            $('.check', this).animate({opacity: 'hide'});
        })
    });
</script>

Answer 3

Tyr this：

$(".pop").hover(
function() {
    $(this).find(".check").animate({
        opacity: 'show'
    });
}, function() {
    $(this).find(".check").animate({
        opacity: 'hide'
    });
});

我试图在鼠标上显示特定元素的元素

3 个答案: