当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

CSS cursor属性用法及代码示例


cursor属性用于指定在指向元素时要显示的鼠标光标。

用法:

cursor:value;

属性值：

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

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | cursor property 
    </title> 
    <style> 
        .wait { 
            cursor:wait; 
        } 
          
        h1 { 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
  
        <h1>GeeksforGeeks</h1> 
        <p>Mouse over the words to change the mouse cursor.</p> 
  
        <p class="wait">wait</p> 
    </center> 
</body> 
  
</html>

输出：

支持的浏览器：CSS | Java支持的浏览器。游标属性如下：

  • 谷歌浏览器
  • Edge
  • 火狐浏览器
  • Opera
  • Safari



相关用法


注：本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 CSS | cursor property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。