Как переопределить CSS: hover?

Итак, у меня есть это:

<ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

И соответствующий CSS:

ul li:hover{
    color:red;
}

Это позволяет обоим "li's" зависеть и изменить цвет. Но если я хочу, чтобы один из них был "отключен", я бы использовал следующее:

.disabled{
    color:grey;
}

Но другой псевдо-класс CSS-кода "hover" все еще срабатывает... В любом случае я могу переопределить это?

Ответ 1

Первое правило переопределяет его из-за специфики CSS, то есть более конкретно.

http://www.htmldog.com/guides/cssadvanced/specificity/

Измените второе правило на:

ul li.disabled, ul li.disabled:hover{
    color:grey;
}

Ответ 2

Измените свой CSS на:

ul li:hover{
    color:red;
}

.disabled ,.disabled:hover{
    color:grey;
}

Посмотрите эту скрипту

Ответ 3

Вам просто нужно изменить свой css:

ul li: hover { красный цвет; }

ul li.disabled, ul li.disabled: hover { Цвет: серый; }

Вы должны отключить эффект наведения, поэтому вы даете ему тот же цвет, что и при не зависании.

Ответ 4

.disabled{
    color:grey !important;
}

Ответ 5

Я пытался получить эффект "отключенного" CSS, который будет применяться автоматически при выполнении следующего javascript:

  document.getElementById("TheButton").disabled = true;

Если "TheButton" определяется классом "TheClass":

  .TheClass { background-color: LightBlue; }
  .TheClass:hover { background-color: Cyan; }

Единственное, что сработало для меня, было с помощью этого CSS:

  .TheClass[disabled]            { background-color: lightgrey; } /* for IE */
  .TheClass[disabled='disabled'] { background-color: lightgrey; } /* for Chrome */
  .TheClass[disabled]:hover            { background-color: lightgrey; } /* for IE */
  .TheClass[disabled='disabled']:hover { background-color: lightgrey; } /* for Chrome */

Ответ 6

Минимум, если требуется только серый цвет в любое время, нет необходимости: наведите курсор на .disabled

ul li:hover{
  color:red;
}
ul li.disabled{// Last rule precedence
   color:grey;
}

Или для обновления скорости используйте! important:

.disabled{
  color:grey !important;
}
ul li:hover{
   color:red;
}

Ответ 7

В css вы можете просто выполнить сброс любого цвета для отключенных элементов, пока мы наводим на него.

ul li:hover:not(:disabled) {
        color: red;
    }

Это приведет к тому, что красный цвет будет применяться только тогда, когда список не отключен.