137

Я пытаюсь применить 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;
}

html css css-selectors мяу
источник

235

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

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

<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>

Развернуть фрагмент

Таблетки взрыва
источник

3

не должно быть: .reMode_hover: not ('. reMode_selected'): hover По моему опыту, эти цитаты необходимы.

Макан Тайеби

1

@MakanTayebi Вы подняли отличную точку в отношении кавычек вокруг селектора. TL; DR: действительно лучше использовать их. Подробное объяснение на stackoverflow.com/a/5578880/1772379 .

Бен Джонсон

Это все еще так? Я не пробовал этого в других браузерах, но в последней версии Firefox, в которой я работаю, :notселектор работал, только когда я удалил кавычки.

Алекс Раммель

30

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

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

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

imsky
источник

12

Способ 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;
}

скрипка

Способ 2

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

скрипка

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

Способ 3

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

скрипка

Коди Гулднер
источник

4

Вы должны удалить свой «Метод 3», в котором упоминается jQuery, поскольку OP специально сказал «не javascript» для решения.

Скоттс

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

Ответы:

Способ 1

Способ 2

Способ 3