CSS3 - hover sibling elem

by Jens Kühn

HTML

<section>
  <div class="m1"></div>
  <div class="m2"></div>
  <div class="m2"></div>
  <div class="m3"></div>
  <div class="m1"></div>
  <div class="m2"></div>
  <div class="m3"></div>
</section>

SCSS

section {
  
}

div {
  pointer-events: auto;
  height: 25px;
  width: 100px;
  border: 2px solid transparent;
  margin: 5px;
}

.m1 {
  border-color: red;
  &:hover{
    &,
    & ~ .m1 {
      background: rgba(0,0,0,.5)
    }
  } 
}

.m2 {
  border-color: black;
  &:hover{
    &,
    & ~ .m2 {
      background: rgba(0,0,0,.5)
    }
  } 
}

.m3 {
  border-color: green;
  &:hover{
    &,
    & ~ .m3 {
      background: rgba(0,0,0,.5)
    }
  } 
}