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

by

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

More Related Contents:

  1. css3 nth of type restricted to class [duplicate]
  2. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. What is the difference between a pseudo-class and a pseudo-element in CSS?
  5. Does CSS have a :blur selector (pseudo-class)?
  6. What is the difference between :focus and :active?
  7. How to select the first, second, or third element with a given class name?
  8. CSS: styled a checkbox to look like a button, is there a hover?
  9. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  10. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  11. What’s the difference between CSS3’s :root pseudo class and html?
  12. Why doesn’t this CSS :not() declaration filter down?
  13. CSS 3 nth of type restricted to class [duplicate]
  14. How to show the first N elements of a block and hide the others in css?
  15. Is there a CSS parent selector?
  16. Select every Nth element in CSS
  17. CSS Selector that applies to elements with two classes
  18. CSS selector based on element text? [duplicate]
  19. Handling a colon in an element ID in a CSS selector [duplicate]
  20. How can I delay a :hover effect in CSS?
  21. IE8 :nth-child and :before
  22. CSS selector to select first element of a given class
  23. Can I use variables for selectors?
  24. CSS Selector for
  25. Is it possible to select the last n items with nth-child?
  26. CSS property value from class name
  27. LESS CSS: abusing the & Operator when nesting?
  28. Angular 2: How to style host element of the component?
  29. How do I select an element only when inside another element?
  30. How do I apply a style to all children of an element

Leave a Comment