Mausbewegung auf die Spanne nicht funktioniert

Question

Angenommen diesen HTML haben:

<a href="" class="hoverelement"><span>DOG</span></a> 

Ich brauche Größe der Zeichenkette "DOG" zu erhöhen, so verwende ich diese CSS:

.hoverelement span:hover { 
    font-size:20px; 
} 

Aber Das funktioniert nicht? Kann mir jemand helfen?

Answer 1

Sie benötigen !important in der Spanne css hinzuzufügen, weil sie vererbt werden kann, indem es Regel der Eltern ist.

.hoverelement span:hover { 
 
    font-size:20px !important; 
 
}

<a href="" class="hoverelement"><span>DOG</span></a>

Answer 2

Versuchen Sie, dem A-Element den hover-Selektor zu geben.

a.hoverelement:hover span { 
    font-size: 20px; 
} 

Answer 3

Verwenden Sie stattdessen:

.hoverelement:hover span { 
    font-size: 20px; 
}