Is there an opposite CSS pseudo-class to :hover?

Question

Is there a pseudo-class in CSS to specify

:not(:hover) 

Or is that the only way to specify an item that is not being hovered?

I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover.

Answer 1

Yes, use :not(:hover)

.child:not(:hover){   opacity: 0.3; } 

.child {   display: inline-block;   background: #000;   border: 1px solid #fff;   width: 50px;   height: 50px;   transition: 0.4s; }  .child:not(:hover) {   opacity: 0.3; }

<div class="parent">   <div class="child"></div>   <div class="child"></div>   <div class="child"></div>   <div class="child"></div>   <div class="child"></div> </div>

Another example; I think you want to: "when one is hovered, dim all other elements".

If my assumption is correct, and assuming all your selectors are inside the same parent:

.parent:hover .child{   opacity: 0.2;      // Dim all other elements } .child:hover{   opacity: 1;        // Not the hovered one } 

.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... simply use the default logic:

.child{   opacity: 0.2; } .child:hover{   opacity: 1; }