Css導航菜單懸停

所以我創建了一個使用CSS的導航菜單，我只有一個問題，當我將鼠標懸停在子菜單上時，我希望頂層菜單將字體顏色更改爲白色，以便人們知道哪個子菜單，他們正在查看...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>

所以，我希望爲李家＃lovedating是字體顏色爲白色，而我懸停在子菜單UL＃navitemul。這可能僅適用於CSS ...我想：

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

但它沒有任何效果，請指教:)謝謝

請訪問我的網站，www.curious-howto.com和查看菜單，如果你想了解更多的我在說什麼:)

來源

2013-04-17 Philippe Allaire

直到css 4.你需要一個父選擇器，它將成爲CSS 4的一部分，但這是未來。 –

非常感謝 –

我認爲代碼應該是

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

因爲你<li>標籤包括所有的<div>的所以風格將繼承

來源

2013-04-17 01:35:30 Sieryuu

我會嘗試使用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-17 01:38:57 tlaverdure

Css導航菜單懸停

回答

相關問題