не применять стиль CSS, если элемент имеет определенный класс

Question

У меня есть упорядоченный список:

<ol id="selectable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

, когда я наводю курсор на элемент, я хочу, чтобы он имел какое-то выделение, поэтому у меня есть:

     #selectable li:hover
 {
        /* some style */
     }

с JavaScript, который я далэти элементы списка атрибут, который при нажатии они меняют стиль.поэтому, если я нажму на элемент 4, например, он будет иметь красный цвет фона.

теперь, как я могу отключить стиль наведения, если элемент имеет стиль ckicked (красный фон)?

Другими словами, я не хочу:

     #selectable li:hover
 {
        /* some style */
     }

применить к выбранным ли ... как я могу это сделать?

Answer 1

Реальный ответ CSS3 на это - селектор :not().

Вы бы изменили свой существующий CSS следующим образом:

#selectable li:hover:not(#selecteditem)
{
  /* some style */
}

К сожалению, этот ответ, вероятно, нетот, который вы хотите, потому что IE8 и более ранние версии не поддерживают селектор :not().

Вы могли бы использовать такой инструмент, как Selectivizr , чтобы добавить поддержку этогоIE, но, честно говоря, вряд ли стоит того для этого примера, так как вы можете легко добавить другой стиль CSS, чтобы переопределить другой:

#selectable li#selecteditem:hover
{
    /* override styles */
}

Надеюсь, это поможет.

Answer 2

CSS3:

#selectable li:hover:not(.selected) {
 background:red;

}

HTML:

<ol id="selectable">
  <li>Item 1</li>
  <li class="selected">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

Answer 3

Вам нужно переопределить стиль hover

#selectable li.selectedclass:hover{
    /* overriding styles */
}