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 with the cursor property and a transparent cursor image but I didn't make it work.
Does anybody know if this can be done? I suppose this can be thought as a security threat for a user that can't know where he is clicking on, so I'm not very optimistic... Thank you!
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.
No definitely not, that would be an egregious user experience crime. Be nice to your users.
N.B. I tested this in Firefox, IE8, Safari, Chrome and Opera on a windows machine and this only seems to work in Firefox.
I did it with transparent *.cur 1px to 1px, but it looks like small dot. :( I think it's the best cross-browser thing that I can do. CSS2.1 has no value 'none' for 'cursor' property - it was added in CSS3. Thats why it's workable not everywhere.
this is good for designing web applications that are meant to be used on a touch screen computer. I am actually programing that now. You need a way to check to see if the user is using a touch screen or not. maybe check ip address or something.