css - 分配 :hover to a class rather than an element

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>