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

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

什么是光标？

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

语法

css selector {
   courser : courser type;
}

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

默认光标

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

立即学习“前端免费学习笔记（深入）”；

示例1

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

   


   
This is an example of default cursor
   Click Here

指针光标

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

css-elector {
   cursor: pointer;
}

文本光标

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

css-elector {
   cursor: text;
}

十字准心光标

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

css-elector {
   cursor: crosshair;
}

移动光标

移动光标以四个箭头指针的形式出现在屏幕上。它通常用于拖放元素，表示它可以移动。我们可以使用以下代码来设置移动光标 -

Kuwebs企业网站管理系统3.1.5 UTF8

酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描

下载

css-elector {
   cursor: move;
}

不允许的光标

不允许的光标表示请求的操作将不会执行。它以一个带有对角线的圆圈的形式出现。我们可以使用以下代码来设置不允许的光标 -

css-elector {
   cursor: not-allowed;
}

进度光标

进度光标以旋转的圆圈形式显示。它表示程序在后台忙碌，但用户仍然可以与界面交互。我们可以使用以下代码来设置进度光标 -

css-elector {
   cursor: progress;
}

等待光标

等待光标显示为旋转的风车。它表示程序正在忙碌中，无法与用户界面进行交互。我们可以使用以下代码来设置等待光标 -

css-elector {
   cursor: wait;
}

帮助光标

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

css-elector {
   cursor: help;
}

示例2

Here is an example of how to set the different types of cursors using CSS.

   


   
Setting the different types of cursors using CSS
   
Move the mouse over the words to see the cursor change:
   
Default
   
Text
   
Pointer
   
Crosshair
   
Move
   
not-allowed
   
Progressd
   
wait
   
help
   
e-resize
   
ne-resize
   
nw-resize
   
n-resize
   
se-resize
   
sw-resize
   
s-resize
   
w-resize

使用CSS自定义光标

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

示例 3

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

  
  

   


   
Custom Cursors with CSS
   

      
Move the mouse over to see the cursor change
      
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
   

In the above example, we have created a div element with a class of my-cursor. We then set the cursor property to URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto。这意味着浏览器将cursor_120340.png文件用作自定义光标，如果找不到或加载文件失败，则回退到默认光标。

结论

在这里，我们讨论了不同类型的CSS光标。它是网页设计师的强大工具，可以自定义光标样式并为用户交互提供视觉反馈。通过使用上面的代码，我们可以在CSS中设置不同类型的光标。