CSS：如何在子菜單項顯示時在菜單項上設置懸停效果

對不起，如果它看起來不好看，我不知道該如何寫我的問題的標題。CSS：如何在子菜單項顯示時在菜單項上設置懸停效果

所以我有一些菜單項和子菜單項的菜單欄：

<div id="mainmenu"> 
<ul id="menu"> 
    <li><a class="current" href="">Menu1</a></li> 
    <li><a href="#">Menu2</a> 
     <ul> 
      <li><a href="">Submenu1</a></li> 
      <li><a href="">Submenu2</a></li> 
     </ul> 
    </li> 
    <li><a href="">Menu3</a></li> 
    <li><a href="">Menu4</a></li> 
</ul> 
</div>

下面是我迄今所做的the fiddle。

我要的是保持菜單項也:hover狀態如果子菜單項是被懸停，比如如果我的鼠標是submenu或submenu2的Menu2也應該是黑暗。我怎樣才能做到這一點與CSS？

我希望我清楚我的問題。

編輯：

的Wooo非常感謝每-之一。 #menu li:hover

#menu li:hover,#menu a:hover,#menu > li a.current{ 

}

來源

2012-07-12 Asif

在你的CSS的最後一行，添加#menu li:hover目標選擇

更新這裏的例子：http://jsfiddle.net/7UaNn/

來源

2012-07-12 09:56:02 poncha

不能接受所有的答案..;），你是最快.. :)謝謝.. – Asif 2012-07-12 10:06:47

作出對懸停LI的背景，而不是「A」的背景發生變化的東西：

用得到它。

ul#menu li:hover { background:#000; }

來源

2012-07-12 09:55:33

您可以通過掛接到父li元素的:hover狀態，而不是實現這一目標錨元素 - 這是實際上被徘徊的列表項的子元素 - 像這樣：

li a:hover, 
li:hover > a { 
    color: #fff; 
}

您可能需要使用:nth-child()來解決處於懸停狀態的每個子鏈接。沒有測試這個。

/edit：更新了選擇器，現在使用> a僅選擇histed列表元素的直接子元素錨元素，不需要：nth-child等。

來源

2012-07-12 09:56:44

此刻，您將listitem的所有hoverstyles應用於a - Element。

但是，您需要將它們應用於li -Element以保持懸停狀態處於活動狀態。

有時可能成爲棘手，但在你的情況下，它是很容易，只需添加：

#menu > li:hover{ 
background:#474747; 
}

你的風格。

見your modified fiddle

來源

2012-07-12 09:57:07 Christoph

在下面的CSS

#menu a:hover, #menu > li a.current { 
    // your Style 
}

因此，它應該是這樣的添加此#menu li:hover > a：

#menu a:hover, #menu > li a.current, #menu li:hover > a { 
    // your Style 
}

見演示：http://jsfiddle.net/akhurshid/bk2HA/7/

來源

2012-07-12 10:00:24

隨着「一」還添加懸停爲「李」：

#menu > li:hover{ 
background:#474747; 
}

來源

2012-07-12 10:05:01

CSS：如何在子菜單項顯示時在菜單項上設置懸停效果

回答

相關問題