Добавление функции toggleClass on Click, как добавить новый наведение с ним?

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>