jquery - 特定の要素の上にマウスで要素を表示しようとしています

Question

これがjQuery関数です。この関数を使用している場合、クラス.checkですべてのdivを適用し、すべてではなくホバーdivのみを適用します。

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

これが関数のhtmlコードです。＃popは親であり、子です。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を1つだけ適用したい。ホバー時にのみ確認してください

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

Tyr this:

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