JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">foobar</div>

CSS

.fix {
    position: fixed;
}

.normal {
    position: absolute;
}

.box{
    width: 100px;
    height: 100px;
    background-color: red;
}

#content {
    background-color: blue;
    width: 400px;
    height: 2400px;
}

JavaScript

$(function(){
    $('#test').hover(function(){
      var self = $(this),
         rgb  = [],
         col  = null;

      this.iid = setInterval(function(){          
        col = ['#'];
        rgb = [~~(Math.random()*255), ~~(Math.random()*255), ~~(Math.random()*255)];
          

          col.push(rgb[0].toString(16).length < 2 ? '0' + rgb[0].toString(16) : rgb[0].toString(16));     
          col.push(rgb[1].toString(16).length < 2 ? '0' + rgb[1].toString(16) : rgb[1].toString(16));
          col.push(rgb[2].toString(16).length < 2 ? '0' + rgb[2].toString(16) : rgb[2].toString(16));

        self.css({backgroundColor: col.join('')});
      }, 100);
   }, function(){
       if(this.iid){
           clearInterval(this.iid);
           delete this.iid;
       }
  });
});