css3 - Is there an opposite CSS pseudo-class to :hover? -
is there pseudo-class in css specify
:not(:hover)
or way specify item not being hovered?
i went through several css3 references, , see no mention of css pseudo-class specify opposite of :hover.
yes, use :not(:hover)
.child:not(:hover){ opacity: 0.3; }
another example; think want to: "when 1 hovered, dim other elements".
if assumption correct, , assuming selectors inside same parent:
.parent:hover .child{ opacity: 0.2; // dim other elements } .child:hover{ opacity: 1; // not hovered 1 }
.child{ display:inline-block; background:#000; border:1px solid #fff; width: 50px; height: 50px; transition: 0.4s; } .parent:hover .child{ opacity: 0.3; } .parent .child:hover{ opacity: 1; }
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
otherwise... use default logic:
.child{ opacity: 0.2; // yey, not hovered! } .child:hover{ opacity: 1; // me! me! me! }
Comments
Post a Comment