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上面的代码。