1
<p class='sent' id='abc'>abc</p>
<p class='sent' id='abb'>abb</p>
<p class='sent' id='acc'>acc</p>

css

.sent:hover{
background-color:#e1e1e1;  // works until the first click on .sent
}

js

$(".sent").click(function() {
$('.sent').css('background-color', 'transparent'); //works
$(this).css('background-color', '#e1e1e1');  //works
});

第一次点击sentcss后sent:hover不起作用!?

4

4 回答 4

2

内联样式优先于样式块中定义的规则。

尝试删除background-color样式而不是将其设置为transparent

$(".sent").click(function() {
    $(".sent").css("background-color", "");
    $(this).css("background-color", "#e1e1e1");
});
于 2013-10-15T08:54:41.233 回答
2

试试.one()

<p class='sent' id='abc'>abc</p>
<p class='sent' id='abb'>abb</p>
<p class='sent' id='acc'>acc</p>

js

$('.sent').one( 'click',function(){
    $(this).addClass('sent_clicked');  
});

或者

$('.sent').one( 'click',function(){
    $('.sent').addClass('sent_clicked');  
});

css

.sent_clicked:hover{
background-color:#e1e1e1; 
}
于 2013-10-15T08:55:22.590 回答
1

注释掉

$('.sent').css('background-color', 'transparent');
于 2013-10-15T08:54:52.660 回答
0

添加!important到您的 CSS 中就可以了。

.sent:hover{
background-color:#e1e1e1 !important;
}

这是一个快速简便的解决方法。你应该避免!important在你的 CSS 中使用。

于 2013-10-15T08:57:00.613 回答