CODEWITHSUNDEEP
csshoverchildren
stemon
stemon

Reputation: 661

CSS Hover siblings but not one

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;
      }
    <div class="row">
      <div class="blue"></div>
      <div class="rosybrown"></div>
      <div class="rosybrown"></div>
      <div class="rosybrown"></div>
    </div>

Upvotes: 2

Views: 44

Answers (2)

Temani Afif
Temani Afif

Reputation: 273561

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;
}
<div class="row">
  <div class="blue"></div>
  <div class="rosybrown"></div>
  <div class="rosybrown"></div>
  <div class="rosybrown"></div>
</div>

Upvotes: 1

John Paul R
John Paul R

Reputation: 752

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;
      }
<div class="row">
  <div class="blue"></div>
  <div class="rosybrown"></div>
  <div class="rosybrown"></div>
  <div class="rosybrown"></div>
</div>

Upvotes: 0

Related Questions