How to change cursor style using jQuery ? Last Updated : 28 Jun, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!DOCTYPE html> <html> <head> <title> How to change cursor style using jQuery ? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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: Comment More infoAdvertise with us Next Article How to run the code on change event using jQuery ? V VigneshKannan3 Follow Improve Article Tags : HTML jQuery-Misc Similar Reads How to change font size using jQuery ? In this article, we will see how to change the font size of an element using jQuery. To change the font size of an element, we will use css() method. The css() method is used to change the style property of the selected element. Syntax: $(selector).css(property) Return value: It will return the valu 1 min read How to change the element id using jQuery ? The jQuery methods are used to change the element ID which are described below: jQuery attr() Method: This method set/return attributes and values of the selected elements. If this method is used to return the attribute value, it returns the value of first selected element. If this method is used to 3 min read How to run the code on change event using jQuery ? In this article, we will see how to run the code on change events using jQuery. The change event is used to trigger when the user changes the value of the element. Syntax: $(selector).change(function) Example: In the below example, we are creating a textarea element that contains GeeksforGeeks text. 1 min read How to get focused element using jQuery? To focus on element there is an inbuilt selector available in jQuery, which is used to detect the currently focused element. When the element is get focused by the mouse click or by the tab-navigating button this selector return the selected element. You can add the element in JQuery to focused that 2 min read How to get focused element using jQuery? To focus on element there is an inbuilt selector available in jQuery, which is used to detect the currently focused element. When the element is get focused by the mouse click or by the tab-navigating button this selector return the selected element. You can add the element in JQuery to focused that 2 min read How to create a Highlighted Slider using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a highlighted slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†1 min read Like