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 () {
        $(this).trigger("circleenter");
    });

    $(".box").on("circleenter", 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");
        });
    });
});