Is it possible to hide the cursor in a webpage using CSS or Javascript?

With CSS:

selector { cursor: none; }

An example:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>

To set this on an element in Javascript, you can use the style property:

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor="none";
</script>

If you want to set this on the whole body:

<script type="text/javascript">
    document.body.style.cursor="none";
</script>

Make sure you really want to hide the cursor, though. It can really annoy people.

Leave a Comment