it-swarm.com.ru

Как исключить конкретное имя класса в селекторе CSS?

Я пытаюсь применить background-color, когда пользовательская мышь наводит курсор на элемент с именем класса "reMode_hover".

Но я не хочу менять цвет, если элемент также имеет "reMode_selected"

Примечание: я могу использовать только CSS, а не javascript, потому что я работаю в какой-то ограниченной среде.

Чтобы прояснить, моя цель - закрасить первый элемент при наведении, но не второй элемент.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Я попробовал ниже, надеясь, что первое определение будет работать, но это не так. Что я делаю неправильно?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}
112
masato-san

Одним из способов является использование множественного селектора класса (без пробела, так как это селектор потомка):

.reMode_selected.reMode_hover:hover 
{
    background-color: transparent;
}

http://jsfiddle.net/geatR/

Другой вариант - использовать селектор :not()

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

http://jsfiddle.net/geatR/1/

199
Explosion Pills

В современных браузерах вы можете делать:

.reMode_hover:not(.reMode_selected):hover{}

Обратитесь к http://caniuse.com/css-sel за информацией о совместимости.

24
imsky

Способ 1

Проблема с вашим кодом заключается в том, что вы выбираете .remode_hover, который является потомком .remode_selected. Итак, первая часть правильной работы вашего кода - это удаление этого пространства.

.reMode_selected.reMode_hover:hover

Затем, чтобы стиль не работал, вы должны переопределить стиль, установленный :hover. Другими словами, вам нужно противостоять свойству background-color. Итоговый код будет

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

Fiddle

Способ 2

Альтернативный метод заключается в использовании :not(), как указано другими. Это вернет любой элемент, для которого класс или свойство не указаны в круглых скобках. В этом случае вы должны поместить туда .remode_selected. Это будет нацелено на все элементы, которые не имеют класса .remode_selected

Fiddle

Однако я не рекомендовал бы этот метод, поскольку он был введен в CSS3, поэтому поддержка браузеров не идеальна.

Способ 3

Третий способ - использовать jQuery. Вы можете выбрать целевой селектор .not(), который будет аналогичен использованию :not() в CSS, но с гораздо лучшей поддержкой браузера

Fiddle

11
Cody Guldner