CSS和Javascript：改變顏色效果懸停風格的功能

我有一個元素，我爲CSS中的懸停狀態設置文本顏色和不同的文本顏色。我有一些JavaScript，所以當我點擊元素時，它會改變元素的文本顏色。它工作正常，但它也影響懸停CSS，我想保持與預先點擊懸停CSS相同。無論如何，要麼停止懸停CSS受到影響，要麼設置懸停CSS？CSS和Javascript：改變顏色效果懸停風格的功能

http://jsfiddle.net/77zg8/

CSS：

#test {color: blue;} 
#test:hover {color:green;}

HTML：

<div id="test" onClick="javascript:change()">qwerty</div>

的Javascript：

function change() {document.getElementById("test").style.color="#cc0000";};

來源

2013-05-03 user2219915

而不是直接設置顏色，它會更乾淨（更有效的使用類）。

CSS：

#test {color: blue;} 
#test.active {color:red;} 
#test:hover {color:green;}

的JavaScript：

function change() { 
    document.getElementById("test").className='active'; 
}

demonstration

來源

2013-05-03 19:10:44

謝謝！我可能會補充說，如果這個元素已經有一個帶有樣式的類，那麼我需要爲這個新類提供相同的樣式。 – user2219915 2013-05-03 19:24:13

-1

您可以使用!importantJSFIDDLE

#test:hover {color:green!important;}

來源

2013-05-03 19:08:34 Anoop

重要的是一個壞主意 – epascarello 2013-05-03 19:11:58

使用類！

#test {color: blue;} 
#test:hover, #test.foo:hover {color:green;} 
#test.foo { color : #cc0000 }

基本的JavaScript：

function change() {document.getElementById("test").className = "foo"; };

當然，你將不得不切換類。

來源

2013-05-03 19:09:05 epascarello

，你正在運行到的問題是在CSS具體的概念。特異性控制着什麼規則得到應用，以什麼順序。由於JavaScript更新了樣式元素，因此它將覆蓋特定屬性並刪除有關顏色樣式的所有先前規則。所以改爲添加一個類，例如「點擊」元素。點擊是你的新顏色

.clicked{color:red} 

function change() {document.getElementById("test").class += " clicked"};

這將做你所需要的。

來源

2013-05-03 19:14:20 mikeswright49

CSS和Javascript：改變顏色效果懸停風格的功能

回答

相關問題