css 控制鼠标显示样式示例

当我们在开发网站时，经常会遇到需要控制鼠标显示样式的情况，比如在图片上悬停时显示手型光标，或者在表单元素上悬停时显示输入光标等。在这种情况下，需要使用 CSS 的 cursor 属性控制鼠标显示样式。下面我将详细讲解“CSS 控制鼠标显示

当我们在开发网站时，经常会遇到需要控制鼠标显示样式的情况，比如在图片上悬停时显示手型光标，或者在表单元素上悬停时显示输入光标等。在这种情况下，需要使用 CSS 的 cursor 属性控制鼠标显示样式。下面我将详细讲解“CSS 控制鼠标显示样式示例”的完整攻略。

1. 基础语法

CSS 的 cursor 属性用于设置鼠标指针的样式，其基本语法如下所示：

selector {
    cursor: value;
}

其中，selector 为 CSS 选择器，可以是标签名、类名、ID 选择器等；value 为鼠标指针的样式值，可以是以下预定义的值之一：

• auto：浏览器自动选择适当的光标
• default：默认光标
• pointer：手型光标，用于链接
• move：指示某个对象可移动的光标
• text：文本光标，用于文本输入框
• wait：等待光标，用于正在加载数据的场景
• help：帮助光标
• crosshair：十字线光标
• not-allowed：禁止光标，用于禁止点击的场景

2. 示例说明

接下来，我将介绍两个示例，分别控制鼠标在不同场景下的显示样式。

示例一：图片悬停显示手型光标

代码如下所示：

img:hover {
    cursor: pointer;
}

解析：

当鼠标悬停在 img 标签上时，使用 hover 伪类选择器将其设置为手型光标。

示例二：表单元素悬停显示输入光标

代码如下所示：

input:hover,
textarea:hover,
select:hover {
    cursor: text;
}

解析：

当鼠标悬停在 input、textarea 或 select 标签上时，使用 hover 伪类选择器将它们的光标设置为文本光标，以提示用户该元素可输入。

通过以上两个示例，我们可以看到，使用 cursor 属性可以在不同场景下控制鼠标显示样式，从而提高网站的用户体验。