Question

我有一个菜单，当我将鼠标悬停在其下方的标签上时，我希望在悬停其他标签时删除“当前”类。目前情况是我需要悬停“当前”选项卡以便删除当前类。我想要的是，当我直接悬停在下一个标签上时，“当前”类会自动删除。请参阅我的演示链接。

以下是DEMO

我也试过这段代码：

$('.left-menu >li').on('mouseover', '>a', function() {
  $(this).parent().addClass('on');
}).on('mouseleave', '>a', function() {
  $(this).parent().removeClass('on');
});

.left-menu {
  width: 180px;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: -2px;
}
.left-menu li {
  display: block;
  line-height: 44px;
  vertical-align: middle;
  border-bottom: 1px solid #dcdcdc;
  background: #fff;
}
.left-menu li a {
  display: block;
  color: #313131;
  padding-left: 20px;
}
.left-menu li a:hover {
  color: #fff;
}
.left-menu li:first-child {
  border-top: 1px solid #dcdcdc;
}
.left-menu li.current {
  border-bottom: 1px solid green;
}
.left-menu li.current a {
  color: #fff;
  background: green;
}
.left-menu li:hover {
  color: #fff;
  background: green;
  border-bottom: 1px solid green;
}
.left-menu li:hover a {
  color: #fff;
}

<ul class="left-menu">
  <li><a href="#">tab1</a>
  </li>
  <li><a href="#">tab2</a>
  </li>
  <li><a href="#">tab3</a>
  </li>
</ul>

删除“当前”类但必须在那里。请帮忙。

Answer 1

您可以使用.siblings() method以便从兄弟元素中删除该类。此外，.addBack() method也用于添加当前元素。

Updated Example

$('.left-menu >li').on('mouseover', '>a', function() {
  $(this).parent().siblings().addBack().removeClass('current');
}).on('mouseleave', function() {
  $(this).parent().addClass('current');
});

使用jquery悬停删除当前标签

1 个答案: