的JavaScript塊CSS代碼

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

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

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

上sent CSS sent:hover不工作第一次點擊後！？

2013-10-15 bonaca

因爲您已將默認顏色設置爲懸停顏色，所以顯然不會有視覺變化。 – ediblecode

這是因爲你正在設置內聯風格。 – CBroe

@danrhul我認爲有多個'.sent'元素，所以他希望當前選擇的**或**懸停元素具有顏色'＃e1e1e1'。 – h2ooooooo

內聯樣式優先於樣式塊中定義的規則。

嘗試取出background-color風格，而不是將其設置到transparent：

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

2013-10-15 08:54:41

謝謝，弗雷德裏克，解決了 – bonaca

註釋掉

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

2013-10-15 08:54:52

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

$('.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-15 08:55:22

這不會取消其他'.sent'元素，這似乎是OP想要的。 – h2ooooooo

@ h2ooooooo檢查更新的代碼.. –

添加!important你的CSS會做的伎倆。

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

這是一個快速和簡單的修復。你應該避免在你的CSS中使用!important。

2013-10-15 08:57:00 Lidor

雖然這會起作用，但這實際上是不好的做法。如果您覺得需要使用'！important'，通常意味着您的CSS不好。 – ediblecode

回答