在悬停时设置“活动”类并保持活动类答案

【问题标题】：Setting an 'active' class on hover and keeping the class of active on在悬停时设置“活动”类并保持活动类
【发布时间】：2018-03-16 03:15:58
【问题描述】：

我遇到了一个问题，我想在项目悬停时为其设置一个“活动”类。当我将鼠标悬停在该项目之外时，我仍然希望“活动”类保持不变。只有当另一个项目悬停时，“活动”类才会从原始悬停中删除并添加到当前悬停中。

我正在使用 toggleClass，但是当我将鼠标从项目上移开时，这并没有保留类。

这里是 JSfiddle - http://jsfiddle.net/HzQ9d/157/

<ul>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

$('li').hover(function() {
  $(this).toggleClass('active');
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

将鼠标悬停事件与兄弟一起使用？

$('li').on('mouseover', function(){
  $(this).addClass('active').siblings().removeClass('active');
});

【讨论】：

【解决方案2】：

相反，使用removeClass 从所有li.active 元素中删除该类，并使用addClass 通过鼠标悬停将其添加到当前悬停的项目上。

$('ul').on('mouseover', 'li', function() {
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

ul li {
  margin: 60px 0;
}

.active {
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

即使您将更多<li>s 动态添加到<ul>，这也将起作用

【讨论】：

如此简单！我最终这样做了 - jsfiddle.net/HzQ9d/160 - 但你的答案似乎更好。谢谢

【解决方案3】：

http://jsfiddle.net/RACCH/82op2tv0/ 使用兄弟姐妹

$('li').hover(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
})

;

【讨论】：

【解决方案4】：

使用addClass 和removeClass 代替toggle。在悬停另一个元素时，只需从之前添加的元素中删除 active 类

$('li').hover(function() {
  $('ul >li').removeClass('active')
  $(this).addClass('active');
});

.active {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

【讨论】：

很好的答案。谢谢！