jQuery - addClass（）mouseover

Question

私はjQueryエフェクトを使用しています。ユーザーが返信画像にマウスを置くと、画像が別の画像に変更されます。私が抱えている問題は、返信画像のためにaddClass（）に設定されている別のオブジェクトの上にマウスを置くと、この新しい返信画像はマウスオーバーしたときにその画像を変更しないということです。私の問題の

デモ： http://www.sfu.ca/~jca41/stuph/jQueryTest/jQueryTest.html

$(document).ready(function(){ 

    $(".red").mouseover(function() { 
     $(this).css("color","red"); 
     $(this).addClass("reply"); 
    }); 
    $(".red").mouseout(function() { 
     $(this).css("color","black"); 
     $(this).removeClass("reply"); 
    }); 

    $(".reply").mouseover(function() { 
     $(this).css("background-image", "url(reply_h.png)"); 
    }); 
    $(".reply").mouseout(function() { 
     $(this).css("background-image", "url(reply.png)"); 
    }); 

}); 

Answer 1

"新しい" 返信画像は、CSSの背景の一部です。したがって、実際にはDOMの一部ではないため、jQueryはそれを変更したり、マウスオーバーしたときに検出することさえできません。 http://jsfiddle.net/mblase75/tJwUW/3/

HTML：：

Mouseover the reply image and it changes states 
<div class="reply"></div> 

<hr><hr><hr> 

<div class="red"> 
<div class="reply"></div> <!-- added --> 
Mouseover this, then mouseover the new reply image 
and notice it does not change state 
</div> 

CSS：

.reply { 
    background-image:url('reply.png'); 
    height: 18px; 
    background-repeat: no-repeat; 
} 
.red .reply { /* added */ 
    visibility: hidden; 
} 

は、あなたが望む結果を得るには、DOMの第二ボタン部分を作成し、表示/非代わりにそれを表示する必要があります

JS：

$(".red").mouseover(function() { // modified 
    $(this).css("color", "red").find(".reply").css('visibility','visible'); 
}); 
$(".red").mouseout(function() { // modified 
    $(this).css("color", "black").find("reply").css('visibility','hidden'); 
}); 

$(".reply").mouseover(function() { 
    $(this).css("background-image", "url(reply_h.png)"); 
}); 
$(".reply").mouseout(function() { 
    $(this).css("background-image", "url(reply.png)"); 
}); 

Answer 2

bg-imageを変更するためにmouseoverでイベントを持つクラスをmouseoverで追加するのはなぜですか？ 画像を変更するために.redのマウスオーバーで直接的に簡単にはなりませんか？

Answer 3

そのため、マウスを動かすとクラス 'red'でdivを追加すると 'reply'クラスが追加され、マウスオーバー状態になります。

ソリューション：は、テキストの前にクラス '赤' とdivの内側の空白のdivを保つ：

<div class="red"><div></div>demo text</div> 

と

$(".red").mouseover(function() { 
    $(this).css("color","red"); 
    $(this).children('div').addClass("reply"); 
}); 
$(".red").mouseout(function() { 
    $(this).css("color","black"); 
    $(this).children('div').removeClass("reply"); 
}); 

$(".reply").mouseover(function() { 
    $(this).css("background-image", "url(reply_h.png)"); 
}); 
$(".reply").mouseout(function() { 
    $(this).css("background-image", "url(reply.png)"); 
});