0

これはおそらく簡単なことですが、長い一日だったので少し迷っています。とにかく、それぞれ異なるサイズの div が散りばめられており、異なるサイズごとに独自のクラスがあります。

<div class="LARGE">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

<div class="SMALL">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

<div class="LARGE">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

<div class="MEDIUM">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

ホバーすると、最初にACTIVEのクラスを切り替えようとしています。アクティブで、CSS を介して CONTENT を削除し、HOVER CONTENT をブロックとして表示しています。

<div class="LARGE ACTIVE">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

私が抱えている問題は、2番目のLARGEにカーソルを合わせると、HOVER CONTENTが最初のLARGEに表示されることです。ホバーしたLARGE divにのみ表示したい。

$('.HOVER_CONTENT').hide();

$('.LARGE').hover(function () {
    $(this).toggleClass('active');
    $('.HOVER_CONTENT').toggle();
});
4

1 に答える 1

4

コンテキストが必要です：

$('.LARGE').hover(function () {
    $(this).toggleClass('active');
    $('.HOVER_CONTENT', this).toggle(); //adds context
});

また：

$('.LARGE').hover(function () {
    $(this).toggleClass('active').find('.HOVER_CONTENT').toggle();
});

大文字は必要ありません。IMO の形式が悪いだけです。

于 2012-12-12T21:00:10.387 に答える