0

これに頭を巻くのに苦労しています。私は2つのdivを持っており、1つはもう1つを正確にオーバーレイしています。たとえば、青いdivが下にあり、赤いdivが上にあり、displayプロパティがnoneに設定されているとします。これを、グループと呼びます。これらの「グループ」も5つ続けてあります。

1つにカーソルを合わせて、非表示の赤いダイブをフェードインさせたいと思います。現在、以下のコードはすべて同じクラスであるため、5つすべてを同時に起動します。

この問題を解決するために何を使用できますか？ホバーイベント内で「this」を使用してみましたが、どこにも行けないようです。

$('.blue').mouseenter( function (){
    $(".red-rollover").fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(".red-rollover").fadeOut("500");
});

編集
申し訳ありませんが、フィドルを投稿しませんでした...私の悪い。これにより、divレイアウトが少しわかりやすくなります。 http://jsfiddle.net/pjPua/

4

5 に答える 5

3

個人的には、 divred-rolloverを青の中にネストしてから、この.children（）を使用して次のようにアクティブ化します。

例： http： //jsfiddle.net/K68F5/

修正で更新されたフィドル：http：//jsfiddle.net/pjPua/1/

$('.blue').mouseenter( function (){
    $(this).children('.red').fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(this).children('.red').fadeOut("500");
});​
于 2012-07-28T04:44:30.587 に答える
3

で試してみてください.closest

$('.blue').mouseenter( function (){
    $(this).closest(".red-rollover").fadeIn("500");
    //OR 
   // $(".red-rollover",$(this)).fadeIn("500");
})
于 2012-07-28T04:40:16.163 に答える
0 
$('.blue').mouseenter( function (){
    $(".red-rollover").eq($(this).index()).fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(".red-rollover").eq($(this).index()).fadeOut("500");
});
于 2012-07-28T04:40:31.137 に答える
0

divが互いに重なっている場合、divはフェードインできません。フェードインするdivのz-indexをアニメーション化して、互いに重なり合うようにする必要があります。

('.blue').mouseenter( function (){
    $(".red-rollover").animate({z-index: "2"}, 500);
});

$('.blue').mouseleave( function (){
   $(".red-rollover").animate({z-index: "0"}, 500);
});

それで十分です。

于 2012-07-28T04:41:33.743 に答える
0

.red-rollover現在の子孫であるセレクターのコンテキストを指定します。.blue

$('.blue').mouseenter( function (){
    $(".red-rollover", this).fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(".red-rollover", this).fadeOut("500");
});

http://jsfiddle.net/pjPua/2/

于 2012-07-28T05:02:09.167 に答える