悬停时设置“活动”类并保持活动类

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>

这会工作，即使你动态的<ul>

Answer 2

增加而不是toggle使用addClass & removeClass更<li>秒。在徘徊另一个元素只是从它以前加入

$('li').hover(function() { 
 
    $('ul >li').removeClass('active') 
 
    $(this).addClass('active'); 
 
});

.active { 
 
    color: red 
 
}

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

Answer 3

http://jsfiddle.net/RACCH/82op2tv0/ 使用的兄弟姐妹

$('li').hover(function() { 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
}) 

元素删除active类;

Answer 4

将事件mouseover与兄弟姐妹一起使用？

$('li').on('mouseover', function(){ 
    $(this).addClass('active').siblings().removeClass('active'); 
});