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無法修改它，甚至無法檢測它何時被挖空。

爲了得到你想要的結果，你需要做的DOM的第二按鍵部和隱藏/顯示它來代替：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; 
} 

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

爲什麼在mouseover上添加鼠標懸停的事件來更改bg-image？ 直接在.red的鼠標懸停來更改圖像時不會更容易嗎？

Answer 3

它的原因是，當您將鼠標懸停在class'red'的div上時，'reply'類會添加到它，並且它也處於鼠標懸停狀態。

解決方案：跟上類 '紅色' 的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)"); 
});