Jqueryの色の変更

Question

私は、任意の背景色を持つことができる要素を持っています（CMS経由で設定）。

マウスオーバーで明るく強調表示し、マウスオーバーで暗くしたいと思います。

私は値を取得して設定するために.css（ 'background-color'）を使ってみましたが、期待したよりもはるかに面倒なようでした。

これを行うにはどうしたらいいですか？

編集：ちょうど明確にする - フィディービットは、色の値を解析し、算術演算を行います - イベントに対処しません。

編集：カラープラグインは色の値を読み取る方法を教えてくれましたが、色の算術と書き込みのサポートはありませんでしたが、まだロバの作業をしなければなりませんでした。

最後に、私は高速の「fadeTo」を使いましたが、不透明アニメーションがIE6で正しく動作することを確認する必要があります。

Answer 1

jQuery Color pluginをチェックしましたか？

コア操作のjQueryコードにカラー操作が存在しないと思うが、おそらく最近のバージョンのjQueryにはすでに色操作が含まれている可能性があります。

jQueryがカラー操作を正しく理解する必要があります。

Answer 2

jQuery hover eventを使用してください。既存の色を取得し、それを変更することに対処するために

var overColor = "#ddd"; 
var outColor = "#ccc"; 

$('#target').hover(function() 
{ 
    $(this).css("background-color", overColor); 
}, 
function() 
{ 
    $(this).css("background-color", outColor); 
}); 

、あなたはHTMLの＃1 XXXXXXスタイルの色を変更理解できるライブラリを見つける必要があります。また、誰かが背景色を「赤」のような名前に設定している場合は、注意する必要があります。

Answer 3

私はあなたが「厄介」によって何を意味するのか分からないが、私はちょうどこれをテストし、あなたがホバー上のスムーズな色の変化をしたい場合はjQueryの

$(document).ready(function() { 
    var originalbc = $("#ThingThatChangesColors").css("background-color"); 
    $("#ThingThatChangesColors").mouseenter(function() { 
     $(this).css("background-color", "#FFF"); 
    }); 
    $("#ThingThatChangesColors").mouseleave(function() { 
     $(this).css("background-color", originalbc); 
    }); 
}); 

Answer 4

最新に動作しているようですが、あなたは試すことができますjquery-glow plugin