jquery - 我正在尝试在鼠标上显示特定元素上的元素

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'
        });
    });
});​

演示。

ps，我更喜欢这种更简洁的方法：

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

演示。

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

提这个：

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