CSS样式在悬停时选择与其他菜单项不同的活动菜单项答案

【问题标题】：CSS Style Select Active Menu Item Differently Than Others on HoverCSS样式在悬停时选择与其他菜单项不同的活动菜单项
【发布时间】：2011-09-05 12:41:19
【问题描述】：

以下 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 之类的东西，但这显然行不通。

任何建议都将不胜感激，费边

【问题讨论】：

标签： css menu joomla

【解决方案1】：

如果我正确理解了您的问题，那么您正在寻找这样的内容：

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

这应该可行，因为第一个选择器比第二个选择器更具体，因此将应用于带有.current 而不是第二个选择器的元素。

这是上述代码的working example。

【讨论】：

【解决方案2】：

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

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

【讨论】：