CSS樣式上懸停

選擇活動菜單項不同於其他以下HTML是Joomla 1.7網站的菜單中創建我的工作：CSS樣式上懸停

<ul class="menu-tabbed-horiz"> 

<li class="item-435 current active parent"> 
    <a class="firstmenuitem" href="/joomla/" >Home</a> 
</li> 
<li class="item-467"> 
    <a href="/joomla/index.php/menu2" >Menu 2</a> 
</li> 
<li class="item-468"> 
    <a href="/joomla/index.php/memu3" >Menu 3</a> 
</li> 

</ul>

通過CSS，我的造型這個菜單。例如，我設置鼠標懸停在上面的菜單項如下：.menu-tabbed-horiz a:hover。活動的可以這樣設計：.menu-tabbed-horiz .current a。

這可以毫無問題地工作，但是現在我想以不同的方式設置菜單項，因爲它是當前菜單項的一部分，並且懸停在上方，而不是僅僅懸停在上面。像.menu-tabbed-horiz a:hover && !.current，但這顯然不起作用。

任何意見，將不勝感激，費邊

來源

2011-09-05 fabian789

如果我理解正確的問題，那麼你正在尋找這樣的事情：

.menu-tabbed-horiz .current a:hover { /*Hovered and current*/ } 
.menu-tabbed-horiz a:hover { /*Hovered (all)*/ }

這應該工作，因爲第一選擇比第二個更具體，因此將應用於元素用.current代替第二個選擇器。

這是上述代碼的working example。

來源

2011-09-05 12:51:19

非常感謝很多人，這很有魅力！ – fabian789

你不能直接做這種事情。解決方案是爲.menu-tabbed-horiz li定義「非當前」風格，爲.menu-tabbed-horiz li.active定義「當前」風格。

第二個樣式比第一個樣式更具體，所以只要兩種樣式都存在，它將優先。第一種風格將應用於所有沒有.current類的.menu-tabbed-horiz元素。

來源

2011-09-05 12:46:49 dnuttle

CSS樣式上懸停

回答

相關問題