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选择器。

＆＃13;

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

＆＃13;

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

＆＃13;

分配：悬停在类而不是元素上

1 个答案: