CSS 教程

CSS 属性

CSS 进阶

CSS 设计

CSS 问题

CSS 其它

CSS 多选题

CSS 面试问题

CSS Cursor光标

当鼠标指针在元素上时，它用于定义鼠标光标的类型。它允许我们指定将显示给用户的光标类型。当用户将鼠标悬停在链接上时，默认情况下，光标会从指针转换为手形。

让我们了解一下游标的属性值。

属性值用法
alias它用于显示要创建的内容的光标指示。
auto它是浏览器在其中设置光标的默认属性。
all-scroll它表示滚动。
col-resize使用它，光标将表示该列可以水平调整大小。
cell光标将表示选择了一个单元格或单元格集合。
context-menu它指示上下文菜单的可用性。
default它表示一个箭头，这是默认光标。
copy它用于表示某物被复制。
crosshair在其中，光标变为十字准线或加号。
e-resize它代表东向，表示框的边缘向右移动。
ew-resize它代表东/西方向并指示双向调整大小光标。
n-resize它表示北方向，表示框的边缘要向上移动。
ne-resize它代表北/东方向，并指示框的边缘向上和向右移动。
move它表示有什么要转移的。
help它采用问号或气球的形式，表示可以提供帮助。
None它用于指示没有为元素呈现光标。
No-drop用来表示被拖拽的item不能放在这里。
s-resize它表示要向下移动边缘框。它指示南方方向。
Row-resize它用于指示该行可以垂直调整大小。
Se-resize它表示南/东方向，表示要向下和向右移动边缘框。
Sw-resize它表示南/西方向，并指示框的边缘将向下和向左移动。
Wait它代表一个沙漏。
<url>它指示光标图像文件的来源。
w-resize它表示向西，表示框的边缘要向左移动。
Zoom-in它用于表示可以放大某些内容。
Zoom-out它用于表示可以缩小某些内容。

使用上述游标属性值的说明如下：

例子 (Example)

<html>  
   <head>  
   </head>  
   <style>  
      body{  
         background-color: lightblue;  
         color:green;  
         text-align: center;  
         font-size: 20px;  
      }  
      
   </style>  
     
   <body>  
      <p>Move your mouse over the below words for the cursor change.</p>  
      <div style = "cursor:alias">alias Value</div>        
      <div style = "cursor:auto">auto Value</div>  
      <div style = "cursor:all-scroll">all-scroll value</div>  
      <div style = "cursor:col-resize">col-resize value</div>  
      <div style = "cursor:crosshair">Crosshair</div>  
      <div style = "cursor:default">Default value</div>  
      <div style = "cursor:copy">copy value</div>  
      <div style = "cursor:pointer">Pointer</div>  
      <div style = "cursor:move">Move</div>  
      <div style = "cursor:e-resize">e-resize</div>  
      <div style = "cursor:ew-resize">ew-resize</div>  
      <div style = "cursor:ne-resize">ne-resize</div>  
      <div style = "cursor:nw-resize">nw-resize</div>  
      <div style = "cursor:n-resize">n-resize</div>  
      <div style = "cursor:se-resize">se-resize</div>  
      <div style = "cursor:sw-resize">sw-resize</div>  
      <div style = "cursor:s-resize">s-resize</div>  
      <div style = "cursor:w-resize">w-resize</div>  
      <div style = "cursor:text">text</div>  
      <div style = "cursor:wait">wait</div>  
      <div style = "cursor:help">help</div>  
      <div style = "cursor:progress">Progress</div>  
      <div style = "cursor:no-drop">no-drop</div>  
      <div style = "cursor:not-allowed">not-allowed</div>  
      <div style = "cursor:vertical-text">vertical-text</div>  
      <div style = "cursor:zoom-in">Zoom-in</div>  
      <div style = "cursor:zoom-out">Zoom-out</div>  
   </body>  
</html>
自己试试 »

上一主题 CSS Display显示 下一主题 CSS Buttons按钮
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具