html - 在 HTML/CSS 中的菜单项上悬停/激活之间切换

Question

悬停另一个菜单项时是否可以从菜单项中删除“事件”类？

有一个工作 fiddle here .默认情况下，主页按钮具有“事件”类，每当将鼠标悬停在其他菜单项上时，我希望删除该“事件”类。以这种方式，只有 1 个菜单项的菜单覆盖在其上。使用 CSS 可以轻松实现吗？或者我需要一些花哨的 JavaScript 吗？

以下代码会将按钮叠加层放置在我的菜单项之上:

#menu li a.active,
#menu li a:hover{
    text-decoration: none;
    background: url('../images/menu_button_overlay.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 30px 10px;
}

谢谢!

Answer 1

使用 CSS 是可能的。

#menu:hover .active {
     background: none;   
}

fiddle