Hide the mouse cursor with CSS

Last updated on February 25, 2018

Hiding the mouse cursor on the page or element is really not a useful thing in reality.Here I just want to show you that hiding mouse cursor is also possible with CSS’s cursor property.

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.In reality, we use cursor property to change cursor style.

To hide the cursor for element simply use

    #selector {
       cursor: none;
    }

To hide the cursor for all the page use body tag

    body {
     cursor: none;
    }

NOTE :
1. elements without cursor work in FireFox and Chrome.
2. Opera does not support neither custom cursors nor “none” cursor style.

We can make it work in IE with simple hack

Download : “none.cur” from http://www.softexe.com/img/none.cur.

 
    #selector {
     cursor: none;
     cursor: url('none.cur');
    }

That’s it. Share your thought via comments.

Related tutoirals