How to change cursor style using jQuery ? - GeeksforGeeks

28 Jun, 2019
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="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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-Misc
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?