Wie mehrere Hover-Klassen auf einer einzigen Text Klasse hat

Question

Ich versuche, die geringste Menge an CSS zu verwenden, um einen einzigen Text class wie diese zu erstellen:

.film_tex {  
    font-family: 'CenturyGothicRegular', sans-serif; 
    font-size: 0.8vw; 
    color:#BFBFBF; 
} 

der Lage sein, zu verwenden, dass class mehrere Male in html Körper. Aber haben einzigartige :hover Klassen für jede

.film_tex:hover { 
    color:#5F75C9; 
} 

konnte ich nur mehrere Versionen des .film_tex Stil erstellen, wie film_tex_01, film_tex_02 etc ... mit Hover-Klassen entsprechen. Aber ich dachte, es muss einen besseren Weg geben.

So:

<div class="film_tex" style="UNIQUE HOVER CLASS 01">NAME</div> 
<div class="film_tex" style="UNIQUE HOVER CLASS 02">HELLO</div> 

Answer 1

Verwenden zusätzliche Klassen, die Sie zu den verschiedenen HTML-Tags als zweiter Klasse gelten, die diese verschiedenen Hover-Arten, wie

.film_tex {  
 
    font-family: 'CenturyGothicRegular', sans-serif; 
 
    font-size: 1.8vw; 
 
    color:#BFBFBF; 
 
} 
 

 
.ho1:hover { 
 
    color:#5F75C9; 
 
} 
 

 

 
.ho2:hover { 
 
    color:#ff03aa; 
 
}

<div class="film_tex ho1">NAME</div> 
 
<div class="film_tex ho2">HELLO</div>

Answer 2

Klingt so, als könnten Sie den: n-ten-Typ-Selektor verwenden. Sie können darüber lesen here

.film_tex:nth-of-type(1):hover { 
    color:#5F75C9; 
} 

.film_tex:nth-of-type(2):hover { 
    color:#ff03aa; 
}