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

Yes, use :not(:hover)

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

Show code snippet

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
}

Show code snippet

Otherwise… simply use the default logic:

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

Leave a Comment