J'essaie d'appliquer la couleur d'arrière-plan lorsqu'un utilisateur survole l'élément dont le nom de classe est "reMode_hover".

Mais je ne veux pas changer de couleur si l'élément aussi a"reMode_selected"

Remarque: je ne peux utiliser que CSS et non javascript car je travaille dans une sorte d'environnement limité.

Pour clarifier, mon objectif est de colorer le premier élément en survol mais pas le deuxième élément.

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>

J'ai essayé ci-dessous en espérant que la première définition fonctionnerait mais ce n'est pas le cas. Qu'est-ce que je fais mal?

CSS

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

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

Une façon consiste à utiliser le sélecteur de classes multiples (pas d'espace car c'est le sélecteur descendant):

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

Dans les navigateurs modernes, vous pouvez faire:

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

Consultez http://caniuse.com/css-sel3 pour obtenir des informations sur la compatibilité.

Méthode 1

Le problème avec votre code est que vous sélectionnez le .remode_hoverqui est un descendant de .remode_selected. Donc, la première étape pour que votre code fonctionne correctement est de supprimer cet espace

.reMode_selected.reMode_hover:hover

Ensuite, pour que le style ne fonctionne pas, vous devez remplacer le style défini par le :hover. En d'autres termes, vous devez contrer la background-colorpropriété. Le code final sera donc

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

Violon

Méthode 2

Une méthode alternative serait d'utiliser :not(), comme indiqué par d'autres. Cela renverra tout élément qui n'a pas la classe ou la propriété indiquée entre parenthèses. Dans ce cas, vous y mettriez .remode_selected. Cela ciblera tous les éléments qui n'ont pas de classe de.remode_selected

Violon

Cependant, je ne recommanderais pas cette méthode, en raison du fait qu'elle a été introduite dans CSS3, la prise en charge du navigateur n'est donc pas idéale.

Méthode 3

Une troisième méthode serait d'utiliser jQuery. Vous pouvez cibler le .not()sélecteur, ce qui serait similaire à l'utilisation :not()en CSS, mais avec une meilleure prise en charge du navigateur

Violon