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

После первого нажатия на sent CSS sent:hover не работает!?

Answer 1

Inline-стили имеют приоритет над правилами, определенными в блоках стиля.

Попробуйте удалить background-color стиль вместо того, чтобы установить его в transparent:

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

Answer 2

Закомментируйте

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

Answer 3

Попробуйте .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; 
} 

Answer 4

Добавление !important на ваш CSS будет делать трюк.

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

Это быстрое и легкое исправление. Вам следует избегать использования !important в вашем CSS.