Question

I want to hide the cursor when showing a webpage that is meant to display information in a building hall. It doesn’t have to be interactive at all. I tried changing the cursor property and using a transparent cursor image but it didn’t solve my problem.

Does anybody know if this can be done? I suppose this can be thought of as a security threat for a user that can’t know what he is clicking on, so I’m not very optimistic… Thank you!

Answer 1

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.