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

Removing active class from element when hovering on another

本文关键字：元素 活动 悬停 另一个      更新时间：2023-09-26

我有一个<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>

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

(更新)

( 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
  }
);

首先使用选择器$('.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>

试试这个…使用mouseenter代替hover 

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

JS文件:http://jsfiddle.net/0c1sanpn/

很简单，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/

相关文章：