jquery - JavaScript は CSS コードをブロックします

Question

<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ません!?

Answer 1

インライン スタイルは、スタイル ブロックで定義されたルールよりも優先されます。

background-colorスタイルを に設定する代わりに、スタイルを削除してみてくださいtransparent:

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

Answer 2

コメントアウト

$('.sent').css('background-color', 'transparent');

Answer 3

!importantCSS に追加するとうまくいきます。

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

これは迅速かつ簡単な修正です。!importantCSS での使用は避ける必要があります。