温馨提示：在 ChatGPT 官网（www.chatgpt.com）使用 GPT-5.5、ChatGPT-Image-2 等模型时，需要 ChatGPT Plus 或更高等级的会员权限。如需购买账号或充值会员，请扫码添加我们客服咨询。
该技术基于深度神经网络与自监督学习，通过大规模无标签数据预训练通用特征表示，再针对特定任务进行微调，其核心在于利用Transformer架构捕获长距离语义依赖，辅以多头注意力机制提升表征能力，训练中采用掩码语言模型与下一句预测等预训练目标，使模型理解上下文关系，实际应用时，仅需少量标注数据即可在文本分类、机器翻译等任务上达到最优性能，该方法显著降低了人工标注成本，推动自然语言处理从规则驱动向数据驱动转变，并为多模态学习奠定了基础。
鼠标移上去就变样？手把手教你用CSS cursor 和 hover 玩转鼠标指针
你好,欢迎来到今天的AI教程，很多刚接触网页制作的朋友，可能都有过这样的疑问：为什么有些网站的按钮，鼠标移上去的时候，会从箭头变成小手？为什么有些图片，鼠标一放上去，就出现一个放大镜？
这个“鼠标移上去就变样”的效果，就是用我们今天要讲的两个东西做出来的，一个是 cursor 属性，另一个是 hover 伪类，它们俩是好朋友，经常一起出现，别担心，它们一点都不复杂，看完这篇文章你就能学会。
第一部分：什么是 cursor？—— 给鼠标指针换衣服
我们先说说 cursor，你可以把它理解成“鼠标指针的皮肤”或者“鼠标的造型”，在电脑里，我们最常见的鼠标指针是一个白色的箭头，对吧？这个箭头就是 cursor 的默认样子。
cursor 这个CSS属性的作用，就是让你可以改变鼠标指针的样子，你可以把它变成小手、变成十字架、变成一根竖线等等。
怎么用呢？很简单，在你的CSS代码里这样写：
/* 让鼠标变成小手 */
.my-element {
cursor: pointer;
}
只要给任何一个HTML元素加上 cursor: pointer; 这个属性，当你的鼠标移到这个元素上面时，鼠标指针就会从箭头变成一个“点击”的小手。
除了 pointer，还有很多其他好用的值，我挑几个最常用的，用最简单的话解释给你听：
default: 这是默认的箭头，如果你不小心把鼠标指针改成了别的，想恢复原样，就用它。pointer: 小手，这是最常用的，代表“可以点击”。text: 一根竖线（像大写字母I的形状），通常用在文本输入框上，告诉用户“这里可以打字”。move: 一个十字箭头，代表“可以拖动”。not-allowed: 一个圆圈加一条斜线，代表“不能操作”或者“禁止点击”，这个也经常用。wait: 一个沙漏或者一个转圈的小圆圈，代表“请稍等，正在加载”。help: 一个箭头旁边加一个问号，代表“这里可以提供帮助”。crosshair: 一个十字准星，在一些需要精确点击的工具里，比如画图软件或地图选点上会用。
你看,这些名字都很形象，你不需要全部背下来，只要记住最常用的几个，pointer，not-allowed 就好，下次你需要在页面上表达不同的“状态”，可以点”、“不能点”、“正在加载”，就可以用它们来告诉用户。
第二部分：什么是 hover？—— 给“鼠标放上去”这个动作加上效果
现在我们说 hover，它不是 cursor 那种“直接改变指针样子”的属性。.hover 是一个“伪类”，这个词听起来有点专业，但意思很简单。
伪类，就是给元素的一种“特殊状态”起个名字。hover 这个特殊状态的名字就叫“鼠标悬停”。
当鼠标的指针（不管它是什么样子）移动到一个元素上面，并且停在那里时，这个元素就进入了 hover 状态。
一旦元素进入这个状态,我们就可以为它单独设置一些CSS样式。
/* 默认状态下的按钮是蓝色 */
.my-button {
background-color: blue;
color: white;
}
/* 鼠标悬停时，按钮变成红色 */
.my-button:hover {
background-color: red;
}
当你把鼠标移到一个 class 为 my-button 的按钮上，这个按钮的背景色就会从蓝色变成红色，鼠标一移开，它又会变回蓝色，这就是 hover 的魔力。
你可以改变很多东西,不仅仅是颜色：
- 可以改变背景色
- 可以改变文字颜色
- 可以改变边框
- 可以变大或变小 (
transform: scale(1.1)) - 可以加上一个阴影 (
box-shadow) - 可以改变透明度 (
opacity)
这些变化能给用户一个“反馈”，让他们知道“我选中了这个东西，它正在回应我”，用户体验就是这么一点点做出来的。
第三部分：cursor 和 hover 是天生一对
现在我们把这两个好朋友放在一起,它们最常见的使用方式就是：在 hover 状态里，改变 cursor 的样式。
你想一下,一个按钮，当你鼠标放上去的时候，不仅颜色变了，而且鼠标箭头也变成了小手，是不是感觉更“像那么回事”了？
代码写起来非常直接：
.my-link {
/* 默认是蓝色文字，没有下划线 */
color: blue;
text-decoration: none;
/* 在这里设置默认的 cursor，其实不用设，因为默认就是 default */
}
.my-link:hover {
/* 鼠标悬停：文字变成红色，加上下划线 */
color: red;
text-decoration: underline;
/* 最关键的一步：鼠标变成小手！ */
cursor: pointer;
}
你看,就是在 hover 的样式块里，多加了一行 cursor: pointer;，这样，当鼠标悬停在链接上时，它就会变成一个可点击的小手，对于用户来说，看到小手就知道这个地方可以点，这已经成了互联网上的一个通用规矩。
给小白用户的建议：
- 永远记得加
cursor: pointer：只要一个元素被设计成“点击后会有反应”（比如按钮、链接、图标），就在hover里加上cursor: pointer;，它是最简单也最能提升用户体验的一行代码。 - 不要过度使用
hover效果：虽然hover很酷，但不要每个地方都加，比如一段普通的文字，鼠标放上去变颜色、变形状，用户会很困惑，请只在“用户预期中会有交互”的地方使用它。 - 玩转
cursor的其他值：除了pointer，试试别的好玩的，比如在一个“正在上传文件”的图标上，用cursor: wait;会非常贴切，在一个“禁止删除”的按钮上，用cursor: not-allowed;加上灰色背景，能让用户马上明白这个按钮为什么不能点。
第四部分：一个完整的、可以动手试一试的例子
我们来写一个最简单的HTML+CSS文件，你可以把它复制到记事本里，然后保存成 .html 文件，用浏览器打开试试看。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Cursor 和 Hover 小练习</title>
<style>
/* 重置一下默认样式，让页面清爽一点 */
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.box {
background-color: white;
padding: 40px;
border-radius: 10px;
text-align: center;
}
/* 第一部分：普通的按钮 */
.btn {
display: inline-block;
padding: 12px 24px;
background-color: #007bff; /* 蓝色 */
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
margin: 10px;
/* 默认鼠标是箭头 */
cursor: default; /* 这里不写也行，但为了演示，我们明确设为 default */
}
.btn:hover {
background-color: #0056b3; /* 深蓝色 */
}
/* 第二部分：点击按钮 —— 鼠标悬停变成小手 */
.btn-click {
display: inline-block;
padding: 12px 24px;
background-color: #28a745; /* 绿色 */
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
margin: 10px;
/* 默认鼠标是箭头 */
cursor: default;
}
.btn-click:hover {
background-color: #1e7e34; /* 深绿色 */
/* 悬停时，鼠标变成小手 */
cursor: pointer;
}
/* 第三部分：禁止点击按钮 */
.btn-disabled {
display: inline-block;
padding: 12px 24px;
background-color: #6c757d; /* 灰色 */
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
margin: 10px;
opacity: 0.6; /* 半透明，表示不可用 */
cursor: not-allowed; /* 鼠标变成禁止符号 */
}
.btn-disabled:hover {
background-color: #5a6268; /* 稍微深一点的灰色 */
/* 不需要再改变 cursor 了 */
}
/* 第四部分：一个可以拖动的图标 */
.drag-icon {
display: inline-block;
padding: 15px;
background-color: #ffc107; /* 黄色 */
border-radius: 50%;
font-size: 30px;
margin: 10px;
cursor: move; /* 鼠标变成十字箭头 */
}
.drag-icon:hover {
background-color: #e0a800; /* 深黄色 */
}
/* 第五部分：普通文本，鼠标变成I形，表示可以选中文字 */
.text {
margin: 10px;
cursor: text;
}
.text:hover {
color: #dc3545; /* 红色 */
}
</style>
</head>
<body>
<div class="box">
<h1>鼠标移上去看看</h1>
<p>1. 普通按钮（没有小手）：</p>
<button class="btn">悬停我（变深蓝）</button>
<p>2. 点击按钮（有小手）：</p>
<button class="btn-click">悬停我（变深绿 + 小手）</button>
<p>3. 禁止点击按钮（鼠标是禁止符号）：</p>
<button class="btn-disabled">不可点击</button>
<p>4. 拖动图标（鼠标是十字箭头）：</p>
<span class="drag-icon">⬡</span>
<p class="text">5. 这里是普通文字（鼠标变成I形，可以选中文字），鼠标悬停文字变红。</p>
</div>
</body>
</html>
操作步骤：
- 复制上面的全部代码。
- 打开记事本,粘贴进去。
- 点击“文件” -> “另存为”。
- 文件名写
test.html，保存类型选“所有文件( )”，编码选“UTF-8”。 - 找到你保存的文件,双击用浏览器打开。
- 把鼠标逐一移到按钮、图标和文字上，观察鼠标指针的变化和颜色的变化。
通过这个例子,你就能非常直观地看到 cursor 和 hover 是怎么工作的了。
今天你学到的两个CSS小技巧,是提升网页交互感最基础、最有效的方法。
cursor负责改变鼠标指针的“长相”，告诉用户即将发生什么类型的操作（点击、打字、移动等）。hover负责监控用户的“鼠标悬停”动作，并在这个动作发生时，触发你定义的样式变化（改变颜色、大小、边框等）。
把它们组合起来,你就能做出像开关按钮、选中高亮、预览效果等等很多有趣的交互，别觉得它们简单，很多复杂的动效和交互，都是从这最简单的“鼠标放上去变了样”开始的。
下次你看到任何网站的按钮或链接,都可以下意识地想一想：它是不是用了 cursor: pointer？它的 hover 效果又是什么？多观察，多动手，你很快就能掌握这些技巧。
好了,今天的教程就到这里，希望你能立刻打开编辑器，动手试试看。
温馨提示：在 ChatGPT 官网（www.chatgpt.com）使用 GPT-5.5、ChatGPT-Image-2 等模型时，需要 ChatGPT Plus 或更高等级的会员权限。如需购买账号或充值会员，请扫码添加我们客服咨询。
网友评论