0

jQueryを使用して、次のようにcssスタイルを次の要素に設定する必要があります

#hdr-nav-wrapper ul li:hover a{ 
    background-color:#0294ca;
}

 #hdr-nav-wrapper ul a:hover{ 
   background-color:#00aeff;
}

ただし、実際の色は、「TestDiv」の id を持つ div の背景色に基づいて動的にする必要があります。このサイトには、ユーザーがカラー テーマ パレットを使用して色を変更できるテーマ エンジンがあります。サイトの上部にナビゲーション バーを追加していますが、ナビゲーション バーの背景を「TestDiv」が現在持っているものと同じにしたいと考えています。

上記のcssをその動的ロジックでjQueryに変換するにはどうすればよいですか?

4

1 に答える 1

3

jQuery .hover()および.css()を使用します。背景色の交換を簡単にするには、<a>タグのサイズに一致する「display-block」要素でタグをラップします<li>。新しいラッパー要素の背景色を追加/削除するだけで済みます (そうしないと、古い背景色をマウスアウト時に元に戻す状態で保存する必要があります)。

これは jsfiddle のデモです。

HTML:

<ul>
    <li><div><a>test</a></div></li>
    <li><div><a>test</a></div></li>
</ul>
<div id="TestDiv" style="background-color:blue;">&nbsp;</div>

CSS:

li {
    background-color: orange;
}

jQuery:

$('ul li').hover(function() { 
    var $el = $(this).find('div');
    if($el.length > 0) {
        $el.css('background-color', $('#TestDiv').css('background-color'));
    }
}, function() {
    var $el = $(this).find('div');
    if($el.length > 0)
        $el.css('background-color','');
});
于 2013-10-01T20:17:49.350 に答える