Überschreiben Sie einen: Hover-Stil, um dem normalen Stil zu entsprechen?

Question

Ich habe einen Link mit:

• a - background-color: red;
• a: Hover - Hintergrundfarbe: grün;

Ich bin jetzt eine neue globale Klasse ‚behindert‘ zu schaffen, hier gelten und in anderen Verbindungen (mit anderen Hintergrundfarben), das dies tut:

• a.disabled - Opazität: 0,7; (so im ersten Beispiel zeigt es Hintergrund rot mit der Opazität 0.7)
• a.disabled: Hover - das gleiche wie a.disabled; (Anfang Beispiel soll zeigen Hintergrund rot mit Opazität 0,7)

Grundsätzlich Behinderten Klasse deaktiviert auch das ‚Schweben‘ -Effekt der Hintergrundfarbe zu ändern.

Ich habe es schwer, eine Lösung dafür zu finden, die als globale Klasse funktioniert (natürlich, wenn ich a.disabled: hover background-color: red es funktioniert).

a { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 1px solid gray; 
 
} 
 

 
a:hover { 
 
    background-color: green; 
 
} 
 

 
.disabled { 
 
    opacity: 0.7; 
 
} 
 

 
.disabled:hover { 
 
    opacity: 0.7; 
 
    background-color: initial; 
 
}

<a href="#">click me</a> 
 
<a href="#" class="disabled">disabled me</a>

Hauptproblem ist hier:

.disabled:hover { 
    opacity: 0.7; 
    background-color: initial; 
} 

Wie ich kann keinen Wert herauszufinden, auf der Hintergrund-Farbe zu setzen, die im Grunde nur ‚Nullen‘ die Hintergrund- Farbe: grüne Anweisung.

Nochmal: Ich weiß, es auf "rot" einzustellen funktioniert. Aber ich habe andere Links mit blauen und gelben Hintergrundfarben und in diesem Fall wird es nicht funktionieren.

Gibt es einen cleveren, globalen Weg, um dies zu erreichen, oder muss ich nur verschiedene .disabled-Klassen für meine 'blauen, roten und gelben' Links erstellen?

Answer 1

Es gibt einen Weg, um dies:

a.disabled{ 
    pointer-events:none; 
} 

Eigentlich tut es mehr als der Hintergrund nur zu bewahren, deaktiviert Es Click-Ereignisse zu

Edit:

Nur um zu verhindern, bewegen Sie a:hover sollte wie folgt geändert werden:

a:not(.disabled):hover 

und entfernen Sie die .disabled:hover

(OR)

scheint, dass Sie die Struktur zu ändern, wenn Sie die CSS gemeinsam sein wollen: keine andere Möglichkeit, ich denken kann:

.linkBlue:hover{ 
 
    background-color:blue; 
 
    } 
 

 
.linkRed:hover{ 
 
    background-color:red; 
 
    } 
 

 
.linkYellow:hover{ 
 
    background-color:yellow; 
 
    } 
 

 
.linkGreen:hover{ 
 
    background-color:green; 
 
    } 
 

 
.disabled{ 
 
    cursor:not-allowed; 
 
    } 
 

 
.disabled a 
 
{ 
 
    pointer-events:none; 
 
}

<a class="linkBlue">Link1</a> 
 
<span class='disabled'><a class="linkRed">Link1</a></span> 
 
<a class="linkYellow">Link1</a> 
 
<span class='disabled'><a class="linkGreen">Link1</a></span>

Answer 2

Gemäß der CSS-Spezifikation ist der Anfangswert:

Jede Eigenschaft hat einen Anfangswert, der in der Definitionstabelle der Eigenschaft definiert ist. Wenn die Eigenschaft keine geerbte Eigenschaft ist und die Kaskade keinen Wert ergibt, ist der angegebene Wert die Eigenschaft der Anfangswert.

Der Anfangswert für die Eigenschaft background-color ist transparent. Dies ist der Grund, warum

.disabled:hover { 
    background-color: initial; 
} 

sich von Ihrer erwarteten Ausgabe unterscheiden.

Aber Sie können es auf andere Weise tun. Könnten Sie dieses CSS versuchen? Hoffe es wird helfen.

a:not(.disabled):hover { 
    background-color: green; 
} 

.disabled:hover { 
    opacity: 0.7; 
}