CSS样式上悬停

Question

选择活动菜单项不同于其他以下HTML是Joomla 1.7网站的菜单中创建我的工作：

<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，但这显然不起作用。

任何意见，将不胜感激，费边

Answer 1

如果我理解正确的问题，那么你正在寻找这样的事情：

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

这应该工作，因为第一选择比第二个更具体，因此将应用于元素用.current代替第二个选择器。

这是上述代码的working example。

Answer 2

你不能直接做这种事情。解决方案是为.menu-tabbed-horiz li定义“非当前”风格，为.menu-tabbed-horiz li.active定义“当前”风格。

第二个样式比第一个样式更具体，所以只要两种样式都存在，它将优先。第一种风格将应用于所有没有.current类的.menu-tabbed-horiz元素。