javascript - 在悬停时设置 'active' 类并保持事件类

Question

我遇到了一个问题，我想在鼠标悬停在某个元素上时将其设置为“事件”类。当我将鼠标悬停在元素之外时，我仍然希望保留“事件”类。只有当另一个元素悬停时，“事件”类才会从原始悬停中删除并添加到当前悬停中。

我正在使用 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');
});

Answer 1

相反，从所有 li.active 中删除该类元素使用 removeClass并使用 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>