Próbuję zastosować kolor tła, gdy mysz użytkownika najedzie na element, którego nazwa klasy to "reMode_hover".

Ale nie chcę zmieniać koloru, jeśli element też ma"reMode_selected"

Uwaga: mogę używać tylko CSS, a nie javascript, ponieważ pracuję w jakimś ograniczonym środowisku.

Aby wyjaśnić, moim celem jest pokolorowanie pierwszego elementu po najechaniu myszą, ale nie drugiego.

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>

Spróbowałem poniżej, mając nadzieję, że pierwsza definicja zadziała, ale tak nie jest. Co ja robię źle?

CSS

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

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

Jednym ze sposobów jest użycie selektora wielu klas (bez spacji, ponieważ jest to selektor podrzędny):

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

W nowoczesnych przeglądarkach możesz:

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

Aby uzyskać informacje dotyczące zgodności, odwiedź witrynę http://caniuse.com/css-sel3 .

Metoda 1

Problem z kodem jest to, że są zaznaczając .remode_hover, że jest potomkiem z .remode_selected. Tak więc pierwszą częścią poprawnego działania kodu jest usunięcie tego miejsca

.reMode_selected.reMode_hover:hover

Następnie, aby styl nie działał, musisz zastąpić styl ustawiony przez :hover. Innymi słowy, musisz przeciwdziałać background-colornieruchomości. Więc ostateczny kod będzie

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

Skrzypce

Metoda 2

Alternatywną metodą byłoby użycie :not(), jak twierdzą inni. Spowoduje to zwrócenie dowolnego elementu, który nie ma klasy lub właściwości określonej w nawiasach. W takim przypadku umieściłbyś .remode_selectedtam. Będzie to dotyczyło wszystkich elementów, które nie mają klasy.remode_selected

Skrzypce

Nie polecałbym jednak tej metody, ponieważ została wprowadzona w CSS3, więc obsługa przeglądarek nie jest idealna.

Metoda 3

Trzecią metodą byłoby użycie jQuery. Możesz .not()ustawić kierowanie na selektor, który byłby podobny do używania :not()w CSS, ale z dużo lepszą obsługą przeglądarki

Skrzypce