Css 导航菜单悬停答案

【问题标题】：Css Nav Menu HoverCss 导航菜单悬停
【发布时间】：2013-04-09 14:48:59
【问题描述】：

所以我使用 css 创建了一个导航菜单，但我只有一个问题，当我将鼠标悬停在子菜单上时，我希望顶部菜单将字体颜色更改为白色，以便人们知道他们是哪个子菜单正在查看...

<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 并查看菜单 :)

【问题讨论】：

直到 css 4。你需要一个父选择器，它将成为 css 4 的一部分，但那是未来。

标签： css colors hover

【解决方案1】：

我会尝试使用 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');
});

【讨论】：

【解决方案2】：

我认为代码应该是

<ul id="navitemul">
<li style="width:150px" id="lovedating"><a href="#">Love & Dating</a>
</li> <!-- Close the <li> tag here -->

因为您的<li> 标签包含所有<div>，所以样式会继承

【讨论】：