Question

我遇到了一个问题，我希望在项目悬停时设置一个“主动”类。当我离开项目时，我仍然希望“活跃”课程留在原地。只有当另一个项目悬停时，“活动”类才会从原始悬停中移除并添加到当前悬停中。

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

JSfre here - 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');
});

Answer 1

相反，请使用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>

动态添加更多<ul>，这也会有效

Answer 2

而不是toggle使用addClass＆amp; removeClass。在悬停另一个元素时，只需从先前添加的元素中删除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>

Answer 3

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

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

Answer 4

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

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

在悬停时设置“有效”课程并在

4 个答案: