JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<ul>
  <li class="el"></li>
  <li class="el"></li>
  <li class="el"></li>
  <li class="el"></li>
  <li class="el"></li>
</ul>

SCSS

ul {
  
  display: flex;
  
  li {
    
    display: block;
    width: 50px;
    height: 50px;
    background: #ccc;
    margin: 20px;
  }
}


ul:hover {
  
  li {
    background: red;
    
    &:hover {
      
      + .el, + .el + .el {
        
        background: #ccc;
      }
    }
  }
}

JavaScript

$('.el').on('mouseover', function)