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

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

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

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

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

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

Способ 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, но с гораздо лучшей поддержкой браузера

скрипка