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)"); 
});