JSFiddle - React, Tailwind, and code Playground

by steveseguin

HTML

<div id="home">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
</div>

CSS

#home {
    background-color: red;
}

.box {
    width: 50px;
    height: 50px;
    background-color: yellow;
    float: left;
}

JavaScript

$('#home .box').mouseover(function(){

var hovBox = $(this);
var prevAll = hovBox.prevAll('.box');
var nextAll = hovBox.nextAll();
console.log($(this).html());
     prevAll.each(function(index){
					console.log($(this).html())
           $(this).fadeTo('fast', index/5);
     });
});