CSS Hover siblings but not one

Question

Example below should, when hovering the pink boxes all other pink boxes fade (opacity:0). That's been accomplished. However, when hovering blue box all pink boxes shouldn't be affected

 .row {
        display: flex;
      }
      .row div {
        width: 25%;
        height: 100px;
        transition: all 0.6s;
      }

      .row .rosybrown {
        background-color: rosybrown;
      }
      .row .blue {
        background-color: lightskyblue;
      }

      .row:hover .rosybrown:not(:hover) {
        opacity: 0;
      }

user_8620333 · Answer

pointer-events can do it

.row {
  display: flex;
  pointer-events:none; /* disable for parent and all childs */
}

.row div {
  width: 25%;
  height: 100px;
  transition: all 0.6s;
}

.row .rosybrown {
  background-color: rosybrown;
  pointer-events:initial; /* re-enable only for brown elements */
}

.row .blue {
  background-color: lightskyblue;
}

.row:hover .rosybrown:not(:hover) {
  opacity: 0;
}

user_8105643 · Answer

This is easy enough to do if you can use javascript to set up some basic event listeners. I do not know how you would achieve this with pure css, however. A working example of how to implement this in js is below!

for (const el of document.getElementsByClassName('rosybrown')) {
      el.addEventListener('pointerover', (e) => {
          e.target.parentElement.classList.add('rosybrown-hovered');
          e.target.classList.add('hovered');
      });
      el.addEventListener('pointerout', (e) => {
          e.target.parentElement.classList.remove('rosybrown-hovered');
          e.target.classList.remove('hovered');
      });
 }

.row {
        display: flex;
      }
      .row div {
        width: 25%;
        height: 100px;
        transition: all 0.6s;
      }

      .row .rosybrown {
        background-color: rosybrown;
      }
      .row .blue {
        background-color: lightskyblue;
      }

      .row.rosybrown-hovered .rosybrown:not(.hovered) {
        opacity: 0;
      }

CSS Hover siblings but not one

2 Answers