css - Assigning :hover to a class rather than an element -
i'm working on decent-sized project in there bunch of elements want fade when user hovers on them. 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 { 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 not concise. question is: possible assign :hover
pseudo class normal css class? had in mind:
.hover-fade { opacity: 1; } .hover-fade:hover { opacity: .5 }
that way i'd able apply class elements want. if it's not possible, other suggestions of how cut down css welcome.
you can apply :hover
valid css selector has :hover
pseudo element.
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>
Comments
Post a Comment