0

css を使用してナビゲーション メニューを作成しましたが、問題が 1 つだけあります。サブメニューにカーソルを合わせると、トップ メニューのフォントの色を白に変更して、どのサブメニューが表示されているかがわかります。 ..

<li style="width:150px" id="lovedating"><a href="#">Love & Dating</a>
<div id="love&dating" class="belownav">
<div class="ontop">Love & Dating</div>
<div class="navitem"><ul id="navitemul">
<li class="marright"><a href="http://www.curious-howto.com/love-dating/broken-hearths/"><img class="fl" src="http://www.curious-howto.com/images/2013/04/Broken-Hearths.jpg" width="63" height="40" /><span class="marleft">Broken Hearths</span></a></li>
<li class="marright"><a href="http://www.curious-howto.com/love-dating/dating/"><img class="fl" src="http://www.curious-howto.com/images/2013/04/Dating.jpg" width="63" height="40" /><span class="marleft">Dating</span></a></li>
<li class="marright"><a href="http://www.curious-howto.com/love-dating/dating-humor/"><img class="fl" src="http://www.curious-howto.com/images/2013/04/Dating-Humor.jpg" width="63" height="40" /><span class="marleft">General Health</span></a></li>
<li class="marright"><a href="http://www.curious-howto.com/love-dating/flirting/"><img class="fl" src="http://www.curious-howto.com/images/2013/04/Flirting.jpg" width="63" height="40" /><span class="marleft">Flirting</span></a></li>
<li class="marright"><a href="http://www.curious-howto.com/love-dating/kissing/"><img class="fl" src="http://www.curious-howto.com/images/2013/04/Kissing.jpg" width="63" height="40" /><span class="marleft">Kissing</span></a></li>
<li class="marright"><a href="http://www.curious-howto.com/love-dating/physical-relationships/"><img class="fl" src="http://www.curious-howto.com/images/2013/04/Physical-Relationships.jpg" width="63" height="40" /><span class="marleft">Physical Relationships</span></a></li>
<li class="marright"><a href="http://www.curious-howto.com/love-dating/relationships/"><img class="fl" src="http://www.curious-howto.com/images/2013/04/relationships.jpg" width="63" height="40" /><span class="marleft">Relationships</span></a></li>
<li class="marright"><a href="http://www.curious-howto.com/love-dating/weddings/"><img class="fl" src="http://www.curious-howto.com/images/2013/04/weddings.jpg" width="63" height="40" /><span class="marleft">Weddings</span></a></li>
</ul></div>
</div></li>

そのため、サブメニュー ul#navitemul の上にカーソルを置いている間、li#lovedating のフォントの色が白であることを望みます。これはcssのみで可能ですか...私は試しました：

ul#navitemul:hover li#lovedating a{color:white;}

しかし、それは効果がありません。アドバイスしてください:)ありがとう

私が言っていることをもっと理解したい場合は、私のサイトwww.curious-howto.comにアクセスしてメニューを表示してください:)

4

2 に答える 2

0

jQueryを使ってみます。

$('ul#navitemul').hover(function(){ // change color of the link to white
       $(this).closest('#lovedating a').css('color', '#FFF');
  },function(){ // change the color of the link back
       $(this).closest('#lovedating a').css('color', '#009');
});
于 2013-04-17T01:38:57.593 に答える