CSS 如何设置不同类型的光标

CSS（级联样式表）是一种用于设计网页视觉外观的强大工具，包括光标样式。光标是网页设计的重要方面。它能够为用户提供视觉反馈，并使他们能够有效地进行交互。

什么是光标

光标是指示用户在屏幕上当前位置的位置指示器。它也被称为“插入符号”。它在用户界面设计中起着重要作用。在CSS中，我们可以根据需要设置光标，以向用户提供视觉反馈，指示特定位置可以执行的操作。

语法

css selector {
   courser : courser type;
}

现在，我们将探索可以使用CSS设置的不同类型的光标。

默认光标

在网页设计中，默认光标是最常见的光标类型，当没有指定其他光标时使用。它在屏幕上看起来像一个箭头指针，指示用户可以点击该元素。

示例1

这是一个设置默认光标的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      a {
         cursor: default;
      }
   </style>
</head>
<body>
   <h2>This is an example of default cursor</h2>
   <a href="https://www.tutorialspoint.com/index.htm" class="my-link">Click Here</a>
</body>
</html>

指针光标

指针光标是由一个手指向链接的手表示的。当用户悬停在链接上时，它表示该元素可点击。我们可以使用以下代码来设置指针光标 –

css-elector {
   cursor: pointer;
}

文本光标

文本光标是一个闪烁的水平或垂直线，看起来像一个 I 形指针。当用户悬停在文本或文本输入字段上时，它表示他们已编辑或选择了文本。我们可以使用以下代码设置文本光标：

css-elector {
   cursor: text;
}

十字准星光标

十字准星光标只是显示为十字准星指针的水平线和垂直线。十字准星光标用于选择屏幕上的特定区域，如图像编辑工具中使用。我们可以使用以下代码设置十字准星光标：

css-elector {
   cursor: crosshair;
}

移动光标

移动光标在屏幕上显示为一个四头箭头指针。通常用于拖放元素，表示它可以被移动。我们可以使用下面的代码来设置移动光标 –

css-elector {
   cursor: move;
}

不允许的光标

不允许的光标表示所请求的操作将不会执行。它显示为带有对角线的圆圈。我们可以使用以下代码设置不允许的光标-

css-elector {
   cursor: not-allowed;
}

进度光标

进度光标显示为旋转的圆圈。它意味着程序正在后台忙碌，但用户仍然可以与界面进行交互。我们可以使用以下代码设置进度光标：

css-elector {
   cursor: progress;
}

等待光标

等待光标呈现为一个旋转的风车形状。它表示程序正在忙于处理任务，无法与用户界面进行交互。我们可以使用下面的代码来设置等待光标：

css-elector {
   cursor: wait;
}

帮助光标

帮助光标显示为一个问号指针。当用户需要帮助，比如点击一个帮助图标或按钮时，就会使用它。我们可以使用以下代码设置帮助光标－

css-elector {
   cursor: help;
}

示例2

下面是使用CSS设置不同类型光标的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
         background-color: lightgreen;
      }
      div{
         margin: 3px;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>Setting the different types of cursors using CSS</h2>
   <h3>Move the mouse over the words to see the cursor change:</h3>
   <div style="cursor:default">Default</div>
   <div style="cursor:text">Text</div>
   <div style="cursor:pointer">Pointer</div>
   <div style="cursor:crosshair">Crosshair</div>
   <div style="cursor:move">Move</div>
   <div style="cursor:not-allowed">not-allowed</div>
   <div style="cursor:progress">Progressd</div>
   <div style="cursor:wait">wait</div>
   <div style="cursor:help">help</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>
</body>
</html>

使用CSS自定义光标

除了CSS提供的标准光标之外，我们还可以使用自定义光标。通过使用自定义光标，我们可以给网站增添独特的风格。

示例3

以下是使用CSS创建自定义光标的示例。

<!DOCTYPE html>  
<html>  
<head>
   <style>
      body{
         text-align: center;
      }
      .my-cursor {
         width: 200px;
         margin: auto;
         background-color: lightblue;
         cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
      }
   </style>
</head>
<body>
   <h2>Custom Cursors with CSS</h2>
   <div class="my-cursor">
      <h3>Move the mouse over to see the cursor change</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
   </div>
</body>
</html>

在上面的示例中，我们创建了一个class为my-cursor的div元素。然后将cursor属性设置为URL(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto。这意味着浏览器将使用cursor_120340.png文件作为自定义光标，如果文件找不到或加载失败，则退回到默认光标。