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:
- 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: