📜  如何使用 jQuery 更改光标样式?

📅  最后修改于: 2021-11-03 10:17:24             🧑  作者: Mango

光标样式用于指定在指向元素时要显示的鼠标光标。

光标值:

  • 别名:此属性用于显示要创建的内容的光标指示。
  • all-scroll:在该属性中,光标表示滚动。
  • auto:这是浏览器设置光标的默认属性。
  • 单元格:在该属性中,光标表示选择了一个单元格或一组单元格。
  • 上下文菜单:在此属性中,光标表示上下文菜单可用。
  • col-resize:在该属性中,光标表示该列可以水平调整大小。
  • 复制:在此属性中,光标指示要复制的内容。
  • 十字准线:在此属性中,光标呈现为十字准线。
  • 默认:默认光标。
  • e-resize:在此属性中,光标表示要向右移动框的边缘。
  • ew-resize:在该属性中,光标表示双向调整大小光标。
  • 帮助:在该属性中,光标表示帮助可用。
  • move:在这个属性中,光标表示要移动的东西
  • n-resize:在此属性中,光标表示要向上移动框的边缘。
  • ne-resize:在此属性中,光标指示要向上和向右移动框的边缘。
  • Nesw-resize:这个属性表示一个双向调整大小的光标。
  • ns-resize:这个属性表示一个双向调整大小的光标。
  • nw-resize:在此属性中,光标表示要向上和向左移动框的边缘。
  • nwse-resize:这个属性表示一个双向调整大小的游标。
  • no-drop:在该属性中,光标表示不能将被拖拽的项目放在这里。
  • none:此属性表示没有为元素呈现光标。
  • not-allowed:在该属性中,光标表示不会执行请求的动作。
  • 指针:在该属性中,光标是一个指针,表示链接
  • progress:在该属性中,光标表示程序正忙。
  • row-resize:在该属性中,光标表示该行可以垂直调整大小。
  • s-resize:在此属性中,光标表示要向下移动框的边缘。
  • se-resize:在此属性中,光标指示要向下和向右移动框的边缘。
  • sw-resize:在此属性中,光标表示要向下和向左移动框的边缘。
  • text:在该属性中,光标表示可以选择的文本。
  • URL:在此属性中,以逗号分隔的自定义光标的 URL 列表和列表末尾的通用光标。
  • 竖排文本:在该属性中,光标表示可以选择的竖排文本。
  • w-resize:在此属性中,光标表示要向左移动框的边缘。
  • 等待:在该属性中,光标表示程序正忙。
  • zoom-in:在这个属性中,光标表示可以放大的东西。
  • 缩小:在此属性中,光标表示可以缩小某些内容。
  • initial:该属性用于设置为其默认值。
  • 继承:从其父元素继承

句法:

$(selector).style.cursor = ”cursor_property_value”;

例子:

// 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"; 

实现:本示例使用 jQuery css()函数来显示不同的光标样式。



    
        
            How to change cursor style using jQuery ?
        
          
        
          
        
    
      
    
        

            Changing cursor style using jQuery         

                   
                                                                   

                    Click on the Radio button to                     change the cursor style                 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
                                                 alias                                                                        all-scroll                                                                           auto                                                                       cell                     
                                                 context-menu                                                                       col-resize                                                                       copy                                                                       crosshair                     
                                                 default                                                                       e-resize                                                                       ew-resize                                                                       help                     
                                                 move                                                                       n-resize                                                                       ne-resize                                                                       nw-resize                     
                                                 ns-resize                                                                       no-drop                                                                       none                                                                       not-allowed                     
                                                 pointer                                                                       progress                                                                       row-resize                                                                       s-resize                     
                                                 se-resize                                                                       sw-resize                                                                       text                                                                       vertical-text                     
                                                 w-resize                                                                       wait                                                                       zoom-in                                                                       zoom-out                     
        
                   
                                         
                Hello welcome             
        
                            

输出: