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

为什么要在鼠标悬停时添加鼠标悬停以更改bg-image的类？直接鼠标悬停.red更改图像会不会更容易？

Answer 3

这是因为当您使用类'red'鼠标悬停div时，'reply'类会添加到它并且它也处于鼠标悬停状态。

解决方案：在文本前面的div为“red”的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)"); 
});

jQuery - addClass（）mouseover

3 个答案: