Ich versuche, eine Hintergrundfarbe anzuwenden, wenn ein Benutzer mit der Maus über das Element fährt, dessen Klassenname lautet "reMode_hover".

Aber ich möchte die Farbe des Elements nicht ändern Auch hat "reMode_selected"

Hinweis: Ich kann nur CSS und kein Javascript verwenden, da ich in einer eingeschränkten Umgebung arbeite.

Zur Verdeutlichung ist es mein Ziel, das erste Element beim Schweben zu färben, aber nicht das zweite Element.

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>

Ich habe es unten versucht, in der Hoffnung, dass die erste Definition funktionieren würde, aber das ist es nicht. Was mache ich falsch?

CSS

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

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

Eine Möglichkeit besteht darin, den Mehrfachklassenselektor zu verwenden (kein Leerzeichen, da dies der Nachkommenselektor ist):

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

In modernen Browsern können Sie Folgendes tun:

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

Konsultieren http://caniuse.com/css-sel3 für Kompatibilitätsinformationen.

Methode 1

Das Problem mit Ihrem Code ist, dass Sie die auswählen .remode_hover das ist ein Nachfahre von .remode_selected. Der erste Schritt, damit Ihr Code richtig funktioniert, besteht also darin, dieses Leerzeichen zu entfernen

.reMode_selected.reMode_hover:hover

Damit der Stil dann nicht funktioniert, müssen Sie den von gesetzten Stil überschreiben :hover. Mit anderen Worten, Sie müssen dem entgegenwirken background-color Eigentum. Der endgültige Code wird also sein

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

Geige

Methode 2

Eine alternative Methode wäre zu verwenden :not(), wie von anderen angegeben. Dadurch wird jedes Element zurückgegeben, das nicht die Klasse oder Eigenschaft hat, die in der Klammer angegeben ist. In diesem Fall würden Sie setzen .remode_selected da drin. Dies zielt auf alle Elemente ab, die keine Klasse von haben .remode_selected

Geige

Ich würde diese Methode jedoch nicht empfehlen, da sie in CSS3 eingeführt wurde und die Browserunterstützung daher nicht ideal ist.

Methode 3

Eine dritte Methode wäre die Verwendung von jQuery. Sie können die zielen .not() Selektor, was der Verwendung ähnlich wäre :not() in CSS, aber mit viel besserer Browserunterstützung

Geige