懸停時設置「活動」類並保持活動類

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