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

任何建议都将受到赞赏，Fabian

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元素。

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

2 个答案: