割り当て：要素ではなくクラスに移動する

Question

私は、ユーザーがそれらの上を移動したときに少し退色したいと思うかなりの要素があるまともなプロジェクトに取り組んでいます。これは私の現在のコードです：

.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; 
} 

これは明らかにあまり簡潔ではありません。私の質問です：:hover疑似クラスを通常のCSSクラスに割り当てることは可能ですか？このようなものが、私が念頭に置いていたものです。

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

こうすれば、私が望む要素にそのクラスを適用することができます。それが不可能な場合は、CSSをどのようにカットするかについての他の提案も歓迎します。

Answer 1

:hoverは、:hover疑似要素を持つ任意の有効なCSSセレクタに適用できます。

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>