How to change cursor style using jQuery ?
The cursor style is used to specify the mouse cursor to be displayed while pointing on an element.
Cursor Value:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- alias: This property is used to display the cursor’s indication of something is to be created.
- all-scroll: In this property, the cursor indicates scrolling.
- auto: This is the default property where the browser sets a cursor.
- cell: In this property, the cursor indicates a cell or set of cells are selected.
- context-menu: In this property, the cursor indicates that a context menu is available.
- col-resize: In this property, the cursor indicates that the column can be resized horizontally.
- copy: In this property, the cursor indicates something is to be copied.
- crosshair: In this property, the cursor renders as a crosshair.
- default: The default cursor.
- e-resize: In this property, the cursor indicates an edge of a box is to be moved to the right.
- ew-resize: In this property, the cursor indicates a bidirectional resize cursor.
- help: In this property, the cursor indicates that help is available.
- move: In this property, the cursor indicates something is to be moved
- n-resize: In this property, the cursor indicates an edge of a box is to be moved up.
- ne-resize: In this property, the cursor indicates an edge of a box is to be moved up and right.
- nesw-resize: This property indicates a bidirectional resize cursor.
- ns-resize: This property indicates a bidirectional resize cursor.
- nw-resize: In this property, the cursor indicates an edge of a box is to be moved up and left.
- nwse-resize: This property indicates a bidirectional resize cursor.
- no-drop: In this property, the cursor indicates that the dragged item cannot be dropped here.
- none: This property indicates no cursor is rendered for the element.
- not-allowed: In this property, the cursor indicates that the requested action will not be executed.
- pointer: In this property, the cursor is a pointer and indicates link
- progress: In this property, the cursor indicates that the program is busy.
- row-resize: In this property, the cursor indicates that the row can be resized vertically.
- s-resize: In this property, the cursor indicates an edge of a box is to be moved down.
- se-resize: In this property, the cursor indicates an edge of a box is to be moved down and right.
- sw-resize: In this property, the cursor indicates an edge of a box is to be moved down and left.
- text: In this property, the cursor indicates text that may be selected.
- URL: In this property a comma-separated list of URLs to custom cursors and a generic cursor at the end of the list.
- vertical-text: In this property, the cursor indicates vertical-text that may be selected.
- w-resize: In this property, the cursor indicates an edge of a box is to be moved left.
- wait: In this property, the cursor indicates that the program is busy.
- zoom-in: In this property, the cursor indicates that something can be zoomed in.
- zoom-out: In this property, the cursor indicates that something can be zoomed out.
- initial: This property is used to set to its default value.
- inherit: Inherits from its parent element.
Syntax:
$(selector).style.cursor = ”cursor_property_value”;
Examples:
// Change the cursor on complete document
$(document).style.cursor = "alias";
// Change the cursor on particular element
$("p").style.cursor = "alias";
// Change the cursor on particular element using class
$(".curs").style.cursor = "wait";
// Change the cursor on particular element using id
$("#curs").style.cursor = "crosshair";
Implementation: This example uses jQuery css() function to display different cursor style.
<!DOCTYPE html><html> <head> <title> How to change cursor style using jQuery ? </title> <script src= </script> <script type="text/javascript"> $(document).ready(function() { $("input[type='radio']").click(function() { var radioValue = $("input[name='cursor']:checked").val(); if(radioValue) { $("#block").css("cursor", radioValue ); }}); }); </script> </head> <body> <h1 align="center"> Changing cursor style using jQuery </h1> <div style="border:2px solid green"> <table width="100%" style="table-layout:fixed;"> <p align="center"> Click on the Radio button to change the cursor style </p> <tr> <td> <input type="radio" name="cursor" value="alias" > alias </td> <td> <input type="radio" name="cursor" value="all-scroll" > all-scroll </td> <td> <input type="radio" name="cursor" value="auto" > auto </td> <td> <input type="radio" name="cursor" value="cell" > cell </td> </tr> <tr> <td> <input type="radio" name="cursor" value="context-menu" > context-menu </td> <td> <input type="radio" name="cursor" value="col-resize" > col-resize </td> <td> <input type="radio" name="cursor" value="copy" > copy </td> <td> <input type="radio" name="cursor" value="crosshair" > crosshair </td> </tr> <tr> <td> <input type="radio" name="cursor" value="default" > default </td> <td> <input type="radio" name="cursor" value="e-resize" > e-resize </td> <td> <input type="radio" name="cursor" value="ew-resize" > ew-resize </td> <td> <input type="radio" name="cursor" value="help" > help </td> </tr> <tr> <td> <input type="radio" name="cursor" value="move" > move </td> <td> <input type="radio" name="cursor" value="n-resize" > n-resize </td> <td> <input type="radio" name="cursor" value="ne-resize" > ne-resize </td> <td> <input type="radio" name="cursor" value="nw-resize" > nw-resize </td> </tr> <tr> <td> <input type="radio" name="cursor" value="ns-resize" > ns-resize </td> <td> <input type="radio" name="cursor" value="no-drop" > no-drop </td> <td> <input type="radio" name="cursor" value="none" > none </td> <td> <input type="radio" name="cursor" value="not-allowed" > not-allowed </td> </tr> <tr> <td> <input type="radio" name="cursor" value="pointer" > pointer </td> <td> <input type="radio" name="cursor" value="progress" > progress </td> <td> <input type="radio" name="cursor" value="row-resize" > row-resize </td> <td> <input type="radio" name="cursor" value="s-resize" > s-resize </td> </tr> <tr> <td> <input type="radio" name="cursor" value="se-resize" > se-resize </td> <td> <input type="radio" name="cursor" value="sw-resize" > sw-resize </td> <td> <input type="radio" name="cursor" value="text" > text </td> <td> <input type="radio" name="cursor" value="vertical-text" > vertical-text </td> </tr> <tr> <td> <input type="radio" name="cursor" value="w-resize" > w-resize </td> <td> <input type="radio" name="cursor" value="wait" > wait </td> <td> <input type="radio" name="cursor" value="zoom-in" > zoom-in </td> <td> <input type="radio" name="cursor" value="zoom-out" > zoom-out </td> </tr> </table> </div> <section> <label> <h1>Output:</h1> </label> <div id="block" style="padding:10px;border:2px solid red;"> Hello welcome </div> </section> </body> </html> |
Output:
