CSS ::游标

 CSS的 cursor属性允许您指定应该显示给用户的光标类型。

此属性的一种很好用法是使用图像作为表单上的提交按钮。默认情况下,当光标悬停在链接上时,光标从指针变为手。但是,它不会更改表单上的“提交”按钮的表单。因此,每当有人将鼠标悬停在作为“提交”按钮的图像上时,它都会提供视觉提示,表明该图像是可单击的。

下表显示了cursor属性的可能值-

序号值与说明
1自动光标的形状取决于光标所在的上下文区域。例如,“我在文本上”,“移交链接”等等……
2十字准线或加号
3默认箭头
4指针指向手(在IE 4中,该值为手)
5移动I栏
6e-resize光标指示框的边缘将向右(向东)移动
7ne-resize光标指示框的边缘将向上和向右移动(向北/向东)
8nw-resize光标指示框的边缘要向上和向左移动(北/西)
9n-resize光标指示框的边缘要向上移动(向北)
10se-resize光标指示框的边缘将被左右移动(向南/向东)
11sw-resize光标指示框的边缘要上下左右移动(南/西)
12s-resize光标指示框的边缘要向下移动(向南)
13w-resize光标指示框的边缘将向左移动(向西)
14文字I栏
15等待一个小时的玻璃杯
16帮助一个问号或气球,非常适合在帮助按钮上使用
17<url>光标图像文件的来源

 –您应该尝试仅使用这些值为用户添加有用的信息,并且在某些地方,他们希望看到该光标。例如,当有人将鼠标悬停在链接上时使用十字准线可能会使访问者感到困惑。

这是一个例子-现场演示

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-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>
   </body>
</html>