javascript - 将鼠标悬停在另一个元素上时从元素中删除事件类

Question

我有一个<ul>有七个<li>里面的元素。第一个将有一个类 active在页面加载时，我想在悬停另一个元素之一后将其删除，并添加 active class 到悬停元素并保持最后一个悬停元素处于事件状态，即使鼠标离开该元素也是如此。我有以下 jQuery 并且它可以工作，除了它还从第一个事件元素中删除事件类，因为它切换它并删除该类，这仅在第一次悬停时，并且如果鼠标离开该元素，事件类就会消失。谢谢!

$(".solutions-items li").hover(function() {
  return $(this).toggleClass("solutions-items-active").siblings().removeClass("solutions-items-active");
});

<ul class="solutions-items">
  <li class="solutions-items-active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

Answer 1

如果您想在离开其他链接后返回事件类到原始链接:

[已更新](因为 hover 已弃用)

$('nav ul li')
  .on('mouseenter', function () {
    $('nav ul li.active').removeClass('active');    // remove class from previous active item
    $(this).addClass('active');                     // item class to the current one
  })
  .on('mouseleave', function () {
    $('nav ul li.active').removeClass('active');    // remove class from previous active item
    active.addClass('active');                      // item class to the current one
  });

<小时/>

旧:

var active = $('.active');
$('nav ul li').hover(
  function () {
    $('nav ul li.active').removeClass('active'); // remove class from previous active item
    $(this).addClass('active');                  // item class to the current one
  },
  function () {
    $('nav ul li.active').removeClass('active'); // remove class from previous active item
    active.addClass('active');                   // item class to the current one
  }
);