Question

当悬停另一个菜单项时，是否可以从菜单项中删除＆＃34;活动＆＃34; -class？

有一个工作小提琴here。默认情况下，主页按钮具有＆＃34; active＆＃34; -class，只要将鼠标悬停在其他菜单项上，我就希望将＃34; active＆＃34; -class删除。以这种方式，只有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

Answer 2

您需要使用Fancy Javascript。但即便如此，我怀疑，它不会起作用，因为在您从家中删除active课程之后，任何其他菜单项都会有覆盖，直到您hover或点击它为止。如果您没有点击任何其他菜单项，那么最终不会有任何菜单项的叠加。

Answer 3

您需要javascript（或更可能是Jquery）

<强> JQuery的

$("li a").click(function () {
  $(this).toggleClass("active");
  $("li a").not(this).removeClass("active");
});

JSFiddle Demo

在HTML / CSS中的菜单项之间切换悬停/活动

3 个答案: