JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<div class="square"></div>
<div class="pointer"></div>

CSS

.square {
    border: 1px solid black;
    margin: 10px;
    background-color: #eee;
    width: 256px;
    height: 256px;
}

.pointer {
    position: fixed;
    width: 30px;
    height: 30px;
    background-color: #ddd;
    border: 1px solid black;
    opacity: 0.7;
    display: none;
}

JavaScript

function showPointer(e) {
    e.preventDefault();
    var square$ = $(this),
        pointer$ = $('.pointer');
    pointer$.css({
        left: e.pageX - pointer$.width() / 2,
        top: e.pageY - pointer$.height() / 2
    }).show();
}

function hidePointer() {
    $('.pointer').hide();
}

$(document)
    .on('contextmenu', '.square', showPointer)
    .on('mouseup', '.pointer', hidePointer);