悬停在另一个元素上时从元素中删除活动类

Question

我有一个<ul>有七个<li>项目。 第一个将在页面加载上有一个active类，我想在其他元素之一悬停后将其删除，并将active类添加到悬停元素并保持最后一个悬停元素处于活动状态，即使鼠标离开该元素. 我有以下 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
  }
);

Answer 2

首先使用选择器$('.solutions-items li')从所有列表项中删除solutions-items-active类。 然后将活动类添加到悬停的类中。

 $(".solutions-items li").hover(function() { $('.solutions-items li').removeClass('solutions-items-active'); $(this).addClass('solutions-items-active'); });

 .solutions-items-active { color: red /* just for the demo */ }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 3

试试这个.. 使用 mouseenter 而不是悬停

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

JS小提琴： http : //jsfiddle.net/0c1sanpn/

Answer 4

很简单， removeClass & addClass

$('.solutions-items li').hover(function() {
    $('.solutions-items-active').removeClass('solutions-items-active'); // remove class from previous active item
    $(this).addClass('solutions-items-active'); // item class to the current one
});

https://jsfiddle.net/Ldovtjyn/