JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div id="cursor-div">
</div>

<div id="cursor-message">
    <p>Message cursor</p>
</div>

CSS

#cursor-div{
    cursor: crosshair;
    width:50px;
    height:100px;
    background-color:red;
}

#cursor-message{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

JavaScript

$("#cursor-div").mousemove(function(event){
   $("#cursor-message").css("top",event.pageY-20);
   $("#cursor-message").css("left",event.pageX+20);
});

$("#cursor-div").mouseenter(function(event){
    $("#cursor-message").show();
});

$("#cursor-div").mouseleave(function(event){
    $("#cursor-message").hide();
});