Custom cursor

Custom cursor

You can change the HTML mouse cursor in two distinct ways: In JavaScript with the DOM element.style object. In CSS with the cursor property. You can use cursors predefined by web browsers or use a custom cursor in the form of an image.

Example to change the mouse cursor, when hovering over an image, in JavaScript:

<img src="https://www.1formatik.com/os.jpg" id="image" alt="">
<script>
document.getElementById("image").style.cursor = "wait";
</script>

Example to change the mouse cursor, on the whole page, in CSS:

<img src="https://www.1formatik.com/os.jpg" id="image" alt="">
<script>
document.getElementById("image").style.cursor = "wait";
</script>

For example to put an image as a cursor on all

tags:

<style>
div {
  cursor: url('image.png'), auto;
}
</style>