悬停使用 jquery 删除当前选项卡

Question

我有一个菜单，当我将鼠标悬停在其下方的选项卡上时，我想删除 "current" class，同时悬停另一个 tab/s。现在的情况是我需要将鼠标悬停在 "current" 选项卡上才能删除当前的 class。我想要的是，当我直接将鼠标悬停在下一个 tab/s 上时，"current" class 将自动删除。请看我的演示 link.

这是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>

通过删除 "current" class 但有必要在那里。请帮忙。

Answer 1

您可以使用 .siblings() method in order to also remove the class from the sibling elements. Additionally, the .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 删除当前选项卡

hover using jquery remove current tab

html

javascript

hover