CSS 样式选择活动菜单项与悬停时的其他菜单项不同
以下 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，但这显然行不通。
任何建议将不胜感激，法比安
The following HTML is created by Joomla 1.7 for the menu of a site I'm working on:
<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>
Via CSS, I'm styling this menu. For example, I style the menu item that the mouse is hovering over like this: .menu-tabbed-horiz a:hover. The active one can be styled like so: .menu-tabbed-horiz .current a.
This works without problem, but now I would like to style a menu item differently when it is the current one and hovered on than when it is just hovered on. Something like .menu-tabbed-horiz a:hover && !.current, but that obviously does not work.
Any suggestions would be appreciated, Fabian
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果我正确理解了你的问题，那么你正在寻找这样的东西：
这应该有效，因为第一个选择器比第二个选择器更具体，因此将应用于带有
.current的元素第二个选择器。这是上述代码的工作示例。
If I've understood your question correctly, then you're looking for something like this:
This should work because the first selector is more specific than the second and will therefore be applied to elements with
.currentinstead of the second selector.Here's a working example of the above code.
你不能直接做这种事。解决方案是为 .menu-tabbed-horiz li 定义“非当前”样式，为 .menu-tabbed-horiz li.active 定义“当前”样式。
第二种样式比第一种样式更具体，因此只要两种样式都存在，它就会优先。第一种样式将应用于所有不具有 .current 类的 .menu-tabbed-horiz 元素。
You can't do this kind of thing directly. The solution is to define the "non-current" style for .menu-tabbed-horiz li, and the "current" style for .menu-tabbed-horiz li.active.
The second style is more specific than the first, so it will take precedence whenever both styles are present. The first style will be applied for all .menu-tabbed-horiz elements that don't have the .current class.