将：hover分配给类而不是元素

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, aa:hover, [name="link"]:hover, div a:hover, .link, .wrapper .link { color: red; } 

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