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 :hoverpseudo 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