2012-01-26 30 views
0

私はそうのようなCSSいます変更CSSを動的に

.myTabs .JustForFun .ajax__tab_inner:hover 
{ 
    width: 109px; 
    background: url ("/images/csc_tr.png") no-repeat 100% 0%; margin-right: 2px; 
    background-color: #BBC614; 
} 

私はbackground-color属性を操作したいのjavascript、jqueryのやC#の後ろasp.netコードを使用します。

どうすればいいですか?お勧めしたソリューションの賛否両論は私が知りたいことです。あなたは、ページが更新されますC#のコードを経由して、それを行う場合

+0

各ホバーで動的に設定するか、ページの読み込み時にその値を設定しようとしていますか? – kwelch

+0

あなたはcss3の使用を検討しましたか?古いブラウザとは互換性がないにもかかわらず、色の変化を通して素敵なトランジションが得られます。 – JackalopeZero

+0

@kwelchページの読み込み:)またはdomオブジェクトの準備 – Anicho

答えて

1

ここに私がしたことがあります。 cssに初期値を設定します。それでにdivhoverに変更しました。

カーソルの最初の機能はカーソルが入ったとき、もう1つはカーソルが終了したときの機能です。

Demo

+0

私はあなたが私が本質的に同じ事を書いていた答えを受け入れることになります。 – Anicho

4

jQueryのでは、単に

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".myTabs").css("background-color","your color"); 
    }); 
</script> 

を使用することができます。

:hoverに属性変更を適用することはできません。代わりにjquery.hover機能を使用する必要があります。

+0

私はちょうど '$(" myTabs.JustForFun .ajax__tab_inner:hover ")をします。css("背景色 "、"あなたの色 ");' – Anicho

+0

あなたの解決策は機能しません。 – Anicho

2

Here it is using css3w3schools tutorialから適合)。

あなたが求めているようなjavascriptはわかりませんが、シンプルな効果を探している方がはるかに簡単です。

+0

Jackalopeのおかげでトランジションパラメータが素晴らしいです! – Anicho

0

:hover, :activeなどを持つ任意のクラスは、簡単に十分なjavascriptやjqueryのから操作することはできません。代わりに、:hover css関数とjquery.hover関数を削除することをお勧めします。

jquery.hover:

$(".classOrID").hover(

    function() { 
     $(this).css("YourAttribute", <%= primaryColor %>); 
    } , 

    function() { 
     $(this).css("YourAttribute", <%= secondaryColor %>); 

    } 
); 

あなたは、これはちょうど私のCMSでカラーピッカーからそれを拾ってその背後コードからC#での値を取得します<%= primaryColor %>に気づくことがあります。

ちょうどcssの変更が必要なものはありません:ホバーします。

$('.classOrID').css('background-color', <%= primaryColor %>); 

または、Shobanはjqueryなしでjavascriptソリューションを推奨しました。

関連する問題