JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<div id="box">
    <span id="c1"></span>
    <span id="c2"></span>
</div>

CSS

#box { width: 400px; height: 400px; border: 1px solid #000000; position: relative; }
#box span { border-radius: 40px; background: #ff0000; width: 14px; height: 14px; position: absolute; }
#c1 { top: 100px; left: 100px; }
#c2 { top: 180px; left: 170px; }

JavaScript

$(document)
.on('mouseenter', '#box span', function() {
    var $this = $(this), left = $this.position().left, top = $this.position().top;
    $this.stop(true, true).animate({"width": "30px", "height":"30px", "top" : top - 8, "left" : left - 8}, 100, function() { $this.stop(true, true).animate({"width": "26px", "height":"26px", "top" : top - 6, "left" : left - 6}, 50); });
})
.on('mouseleave', '#box span', function() {
    var $this = $(this), left = $this.position().left, top = $this.position().top;
    $this.stop(true, true).animate({"width": "12px", "height":"12px", "top" : top + 7, "left" : left + 7}, 100, function() { $this.stop(true, true).animate({"width": "14px", "height":"14px", "top" : top + 6, "left" : left + 6}, 50); });
});