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

Question

I'm working on a decent-sized project in which there are a bunch of elements I want to fade slightly when the user hovers on them. This is my current 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;
}

This is obviously not very concise. My question is: is it possible to assign a :hover pseudo class to a normal CSS class? Something like this is what I had in mind:

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

That way I'd be able to just apply that class to the elements I want. If it's not possible, any other suggestions of how to cut down the CSS are welcome.

Answer 1

You can apply :hover to any valid css selector that has :hover pseudo element.

 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>