JSFiddle - React, Tailwind, and code Playground

HTML

<br /><div>test test test test test test test test test test test test test test test test testtest test test test test testtest test test test test t</div>

JavaScript

$("div").on({
    mousemove: function (e) {        
        var $this = $(this);
        var x = e.offsetX;
        var width = $(this).width();
        
        // fix for firefox
        if(typeof x === "undefined"){
           x = e.pageX - $this.offset().left;
           y = 200;
        }        
        if ( x<= 10 ) {
            $this.css("background-color", "red");
            $this.css("cursor","pointer");
        }
        else {
            $this.css("background-color", "white");
            $this.css("cursor","default");
        }
        
        
        if ( x > (width-10)) {
            $this.css("background-color", "green");
            $this.css("cursor","pointer");
        }        
        
        

    },
    mouseleave: function (e) {
        $(this).css("background-color", "white");
        $this.css("cursor","default");
    }
});