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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.