Zuweisen: Hover zu einer Klasse und nicht zu einem Element

Question

Ich arbeite an einem anständigen Projekt, in dem es eine Reihe von Elementen gibt, die ich leicht ausblenden möchte, wenn der Benutzer auf ihnen schwebt. Dies ist mein aktueller Code:

.brand-images img, 
.horList li a, 
.producto__descripcion a, 
.slider-btn, 
.social-media__banner a, 
.marca-productos__foto, 
.marca-productos__nuevos-productos a, 
.producto-zona__image a, 
.campanas a { 
    opacity: 1; 
} 

.brand-images img:hover, 
.horList li a:hover, 
.producto__descripcion a:hover, 
.slider-btn:hover, 
.social-media__banner a:hover, 
.marca-productos__foto:hover, 
.marca-productos__nuevos-productos a:hover, 
.producto-zona__image a:hover, 
.campanas a:hover { 
    opacity: .5; 
} 

Dies ist offensichtlich nicht sehr prägnant. Meine Frage ist: ist es möglich, eine :hover Pseudoklasse einer normalen CSS-Klasse zuzuweisen? So etwas ist, was ich im Sinn hatte:

.hover-fade { opacity: 1; } 
.hover-fade:hover { opacity: .5 } 

Auf diese Weise würde ich der Lage, nur die Klasse gelten für die Elemente, die ich will. Wenn dies nicht möglich ist, sind weitere Vorschläge zur Reduzierung des CSS willkommen.

Answer 1

Sie können :hover auf jeden gültigen CSS-Selektor anwenden, der :hover Pseudoelement hat.

div.wrapper a[name="link"]:hover, 
 
a:hover, 
 
a.a:hover, 
 
[name="link"]:hover, 
 
div a:hover, 
 
.link, 
 
.wrapper .link { 
 
    color: red; 
 
}

<div class="wrapper"><a name="link" class="a">Link</a> 
 
</div>