Question

我有一个<ul>，其中包含七个<li>个项目。第一个在pageload上有一个类active，我希望在其中一个元素悬停后删除它，并将active类添加到hovered元素并保留最后一个悬停元素即使鼠标离开元素也会激活。我有以下jQuery并且它可以工作，除了它还从第一个活动元素中删除活动类，因为它切换它并删除类，仅在第一个悬停时，如果鼠标离开元素，活动类将消失。谢谢！

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

如果您想在离开其他链接后将活动课程恢复为原始链接：

        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

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

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

JS Fidle：http://jsfiddle.net/0c1sanpn/

Answer 3

很简单，removeClass＆amp; 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/

Answer 4

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

$(".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>

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

4 个答案: