Open In App

How to change cursor style using jQuery ?

Last Updated : 28 Jun, 2019
Improve
Improve
Like Article
Like
Save
Share
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.




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




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        How to make Horizontal checkbox controlgroups using jQuery Mobile ?
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to sort rows in a table using JavaScript ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to change cursor to waiting state in JavaScript/jQuery ?
            

        
    
        
            

                How to set cursor style that indicates any direction scroll using CSS ?
            

        
    
        
            

                How to set the cursor style on browser using CSS ?
            

        
    
        
            

                How to remove CSS style of <style> tag using JavaScript/jQuery ?
            

        
    
        
            

                HTML | DOM Style cursor Property
            

        
    
        
            

                How to set cursor style to pointer for links without href ?
            

        
    
        
            

                How to change cursor color using CSS ?
            

        
    
        
            

                How to detect and change the content/style of a div using jQuery ?
            

        
    
        
            

                How to change style of elements on scroll using jQuery ?
            

        
    
        
            

                jQuery UI Sortable Cursor Option
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
V

        

            
        

        

                                    


                                    

                                        VigneshKannan3                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox