ホバーするとテキスト文字列の色が変わる短いスクリプトを作成しようとしています。
HTML:
<span class="headinglink" id="firstheading"><h1><a href="http://localhost/page.php">Link1</a></h1></span>
JavaScript:
$('#firstheading').hover(function () {
$(this).find('h1').stop().animate({ color: "#53799E" }, 1000);
}, function() {
$(this).find('h1').stop().animate({ color: "#F58426" }, 1000);
});
奇妙なことに、Chromes 要素インスペクターを開くと、上記の要素の RGB 値が実際に変更されていることがわかります。たとえば、次のようにする必要があります。
<h1 style="color: rgb(245, 132, 38); ">
しかし、要素の実際の色は変わりません。外部 CSS がまだ上記のインライン CSS を書きすぎているようです。
これを回避する方法を知っている人はいますか?この要素の外部 CSS を完全に捨てる必要がありますか?
(PS私はjQueryとUIライブラリの両方をうまくリンクしています)。