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

时间:2012-12-10 13:43:38

标签: jquery html

这是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。仅在悬停时检查

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

Tyr this:

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