Kreis um Mauszeiger in Javascript anzeigen

Question

Wie kann ich in Javascript um den Mauszeiger herum einen roten Kreis zeichnen so wie man es bei Teamviewer sieht?

Answer 1

Zuerst brauchst du ein CSS um den Kreis anzuzeigen.

#circle {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
}

Dann setzt du in den HTML Code ein Element mit dem CSS.

<div id="circle"></div>

und zuletzt berechnest du mit dem Javascript Event 'mouseMove' wo sich die Maus gerade befindet und positionierst das DIV dementsprechend.

const circle = document.getElementById('circle');

document.addEventListener('mousemove', (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    circle.style.left = mouseX + 'px';
    circle.style.top = mouseY + 'px';
});