javascript - CSS と Javascript: 色効果のホバー スタイルを変更する関数

Question

CSS でホバー状態のテキストの色と別のテキストの色を設定する要素があります。要素をクリックすると、要素のテキストの色が変わるように、いくつかのJavaScriptがあります。事前にクリックしたホバー CSS と同じままにしたいホバー CSS にも影響することを除いて、正常に動作します。ホバーCSSが影響を受けないようにするか、ホバーCSSを設定する方法はありますか?

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

Answer 1

色を直接設定する代わりに、よりきれいになります (そして、クラスを使用する方が効果的です)。

CSS :

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

JavaScript :

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

デモンストレーション

Answer 2

クラスを使おう！

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

基本的な JavaScript:

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

もちろん、クラスを切り替える必要があります。

Answer 3

JSFIDDLEを使用できます!important

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