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; } 

jsbin demo

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -