How to Change The Mouse Cursor of a Website?
Changing Mouse Cursor with CSS
<!DOCTYPE html><html>
<head>
<title> Changing Cursor</title>
<style type=”text/css”>
body {
cursor:url(http://www.123cursors.com/freecursors/1055.gif);
}
</style>
</head>
<body>
</body>
</html>
CSS core values for changing mouse cursor
Here is the list of the all values which has been defined in CSS core programming. You can use one of the below listed values to change the pointer/cursor of your website:
- cursor:crosshair;
- cursor:e-resize;
- cursor:help;
- cursor:move;
- cursor:n-resize;
- cursor:ne-resize;
- cursor:nw-resize;
- cursor:pointer;
- cursor:progress;
- cursor:s-resize;
- cursor:se-resize;
- cursor:text;
- cursor:wait;
- cursor:url(image.png);
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
The example above shows how the pointer is changed. We just used this CSS property in an HTML DIV:
<div style=”cursor:url(http://www.123cursors.com/freecursors/6890.gif); border:4px solid green; padding:15px;”> Content Goes Here</div>
You can also copy the above code to check it by yourself. However, if you want to change the cursor of your entire blog or website then you must add the CSS cursor property inside <body> tag.
You can download a numerous number of free mouse pointers by visiting below websites:
You can use any image for the pointer as you want, but the smaller sizes are pretty much better than larger images. So do implement today’s trick and let me know if you have something to say.
You may also like
HTML5 & CSS3 Complete Course in Urdu/Hindi
Responsive Portfolio Website Using Bootstrap in Urdu/Hindi
1 Comment
very nice sir wali i like your work Allah bless you.