JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="circle"></div>
</div>

CSS

#box-wrapper{
    position:relative;
    width:400px;
    height:100px;
}
.box{
    width:75px;
    height:75px;
    border:1px solid #000;
    background:#ccc;
    float:left;
    cursor:pointer;
}
.circle{
    position:absolute;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#fff800;
    left:18px;
    top:18px;     
}

JavaScript

$(document).ready(function(){
    var circle=$(".circle");
    $(".box").mouseenter(function(){
        var $this=$(this),
            idx=$this.index();
        width=$this.width();
        var animate={left:width*idx+18};
        circle.animate(animate,200,function(){
            $this.css("background","#888");
        });
    });
});