Мне нужен вид селектора CSS типа «не делай этого, если мой класс отключен»

Question

В настоящее время у меня есть следующий CSS:

a.enabled:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

Код:

<div><a class="enabled" ......>07</a></div>
<div><a class="enabled" ....... >08</a></div>
<div><a class="disabled" >09</a></div>
<div><a class="enabled" ...... >10</a></div>
<div><a class="enabled" .......>11</a></div>

При наведении курсора на ссылку «включен» цвет фона меняется.При наведении курсора на «отключенную» ссылку ничего не происходит.

Я бы хотел сократить размер моей страницы, удалив весь текст class = "enabled", который появляется во многих строках (более 200).Примерно так.

После:

<div><a  ........>07</a></div>
<div><a  ....... >08</a></div>
<div><a class="disabled" >09</a></div>
<div><a  ...... >10</a></div>
<div><a  .......>11</a></div>

Есть ли способ сделать это с помощью CSS?Я просто хочу, чтобы при наведении указатель мыши не менял цвет фона, если ссылка имеет статус «отключен».

Answer 1

Селектор, который вы будете использовать,

a:not(.disabled):hover { background-color: #f9f9f9; border: 1px solid #ddd; }

Компромисс заключается в совместимости браузера - IE <9 не поддерживает <code>:not(). В качестве обходного пути вы можете вместо этого использовать правило переопределения с этими двумя правилами, если вы можете определить цвет фона по умолчанию:

a, a.disabled:hover { /* Default background and border */ }
a:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

... или просто придерживайтесь существующих решений .enabled и .disabled.

Answer 2

Добавить правило css для a.disalbe: hover, имеющего тот же цвет, что и значение по умолчанию, установленное для

a, a.disabled:hover { background-color: red; }
a:hover { background-color: green; }

демо в JsBin

Answer 3

Попробуйте использовать селектор css :not.

div a:not(.disabled):hover

Answer 4

 a.disabled:hover { background-color: red; border: 1px solid #ddd; }

Вы пробовали это?Или что-то вроде этого:

a:hover { /* disabled-definitions */ }
a.enabled:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

... и тогда вы используете только включенный класс в своем HTML

Answer 5

Не могли бы вы просто применить стиль ко всем div a и затем отменить его, когда применяется класс .disabled?

Что-то вроде

a.disabled:hover { background-color: transparent; border: 1px solid transparent; }