JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<body>
  <div class="container">
    <div class="lighter"></div>
  </div>
</body>

CSS

body{
  background-color: rgba(0, 0, 0, 1);
  width:100%;
  height:100%;
}
.container{
  position:relative;
  width:500px;
  height:200px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.3);
}
.lighter{
  position:absolute;
  width:10px;
  height:10px;;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius:50%;
  display:none;
}

JavaScript

'use strict'; 
$(document).mousemove(function(event) {
var offset = $('.container').offset();
var x = event.clientX - offset.left;
var y = event.clientY - offset.top;
var outx = $('.container').width();
var outy = $('.container').height();
var jumTop = $('.lighter').width() / 2;
var jumLeft = $('.lighter').height() / 2;

    console.log(x,y,outx,outy);
    $('.lighter').css({
        top: y-jumTop,
        left: x-jumLeft,
        display: 'block'
    });
    if(x < 0 || x > outx || y < 0 || y > outy )
        $('.lighter').hide();
        
});
$('.lighter').on('click', function(){
    $(this).animate({
        width: '+=20px',
        height: '+=20px'
        
    });
});