JQuery применяет два класса CSS, один применяет мое форматирование, другой нет

Question

Сразу же, вот мой код, так что вы можете указать на очевидную ошибку: я бьюсь головой о клавиатуру в поисках:

CSS:

.li_hover { background-color: #add8e6; };
.li_selected { background-color: #add8e6; };

(релевантно) JavaScript / jQuery:

//Change background color when hovering over element
$("li").hover(function(){
    console.log("hover");
    $(this).toggleClass("li_hover");
});

$("li").click(function(){
    console.log("clicked");

    $(this).addClass("li_selected");
    //This isn't working, visually show element was selected

});

(релевантно) HTML:

<div id="playerCountDiv">
Player Count:

<ul id="playerCountList">
    <li id="2Players" value="17"> 2 </li>
    <li id="3Players" value="18"> 3 </li>
    <li id="4Players" value="21"> 4 </li>
    <li id="5Players" value="25"> 5 </li>
    <li id="6Players" value="28"> 6 </li>
</ul>
</div>

Что я хочу сделать: когда я наводю указатель мыши на элемент li, цвет фона меняется. Когда я щелкаю по нему, он остается тем же цветом (или превращается в другой цвет, но я точно не определился).

Наведение работает, как и ожидалось, и у меня есть больше JavaScript в функции .click, которая все работает. Когда я проверяю страницу, класс li_selected фактически применяется к каждому элементу при нажатии, но стиль на самом деле не меняется. Я предполагаю, что что-то во всех двух написанных мною строчках CSS приводит к тому, что стиль не применяется, даже если оба класса применяются правильно.

Интересно, если я переверну две строки CSS так, чтобыli_selected находится сверху, тогда ни один не работает вообще.

Answer 1

У вас есть лишние ";"в вашем CSS, которые нарушают стиль. В противном случае все выглядит хорошо. Я исправил их при редактировании вашего примера кода во фрагмент.

Это должно работать:

.li_hover {
  background-color: #add8e6;
}

.li_selected {
  background-color: #add8e6;
}

Answer 2

Когда два CSS-селектора имеют одинаковую силу, последний, отображаемый в браузере, будет рассматриваться браузером. Вам может потребоваться настроить специфичность CSS:

Вариант 1: настроить Специфичность :

#playerCountList .li_hover { background-color: #add8e6;  }

Вариант 2: Использовать !important

.li_hover { background-color: #add8e6 !important;  }

Вариант 3. Используйте только CSS для выполнения работы:

#playerCountList li:hover { background-color: #add8e6; }