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

Aber ich möchte die Farbe nicht ändern, wenn das Element auch hat"reMode_selected"

Hinweis: Ich kann nur CSS und kein Javascript verwenden, da ich in einer begrenzten 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 unten versucht, in der Hoffnung, dass die erste Definition funktionieren würde, aber das ist nicht der Fall. 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 Selektor für mehrere Klassen zu verwenden (kein Leerzeichen, da dies der Nachkommen-Selektor 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{}

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

Methode 1

Das Problem mit dem Code ist , dass Sie das sind die Auswahl , .remode_hoverdie eine ist Nachkomme von .remode_selected. Der erste Teil, damit Ihr Code richtig funktioniert, besteht darin, diesen Speicherplatz zu entfernen

.reMode_selected.reMode_hover:hover

Damit der Stil nicht funktioniert, müssen Sie den von der :hover. Mit anderen Worten, Sie müssen der background-colorEigenschaft entgegenwirken. 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 die Verwendung :not(), wie von anderen angegeben. Dies gibt jedes Element zurück, dessen Klasse oder Eigenschaft nicht in Klammern angegeben ist. In diesem Fall würden Sie dort eingeben .remode_selected. 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, sodass die Browserunterstützung nicht ideal ist.

Methode 3

Eine dritte Methode wäre die Verwendung von jQuery. Sie können auf den .not()Selektor abzielen , der der Verwendung :not()in CSS ähnelt , jedoch eine viel bessere Browserunterstützung bietet

Geige