在點擊功能上添加toggleClass，如何添加一個新的懸停？

Question

希望你們有一個美好的一天到目前爲止，仍然在這裏學習jquery，我有一個問題，如果有人覺得幫助它會很好，

我有一個類名爲「nav」的列表請參閱HTML下面，當我點擊這個列表中的第五個孩子時，我已經添加了一個toggleClass到這個列表，所以文本顏色從白色變爲黑色，這是由於我添加了一個新的背景顏色，問題是，我有一個css懸停在這個列表上，懸停時文本變成黑色，請參閱下面的css，我希望這個懸停可以隨着我的toggleClass文本顏色變化暫時改變，所以我在點擊時切換類「active2」，然後然後在「active2」上設置懸停狀態，切換類可以工作，但不是懸停狀態。你如何做這項工作，所以懸停也改變，任何人？

$(".nav li:nth-child(5)").click(function() { 
 
    $(".nav li").toggleClass("active2"); 
 
});

.nav li:hover { 
 
    color: #000; 
 
} 
 
.active2 { 
 
    color: #000; 
 
} 
 
.active2:hover { 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav"> 
 
    <li>Test1</li> 
 
    <li>Test2</li> 
 
    <li>Test3</li> 
 
    <li>Test4</li> 
 
    <li>Test5</li> 
 
</ul>

Answer 1

問題是css specificity，只是重新定義懸停規則有更具體的一個

$(".nav li:nth-child(5)").click(function() { 
 
    $(".nav li").toggleClass("active2"); 
 
});

.nav li:hover { 
 
    color: #000; 
 
} 
 
.nav .active2 { 
 
    color: #000; 
 
} 
 
.nav .active2:hover { 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav"> 
 
    <li>Test1</li> 
 
    <li>Test2</li> 
 
    <li>Test3</li> 
 
    <li>Test4</li> 
 
    <li>Test5</li> 
 
</ul>