:hover伪类可实现鼠标悬停变色，需确保选择器正确、优先级足够且元素支持交互；链接默认支持，非链接元素需加cursor: pointer；配合transition可实现平滑过渡，注意写在默认状态中。
直接给元素添加 :hover 伪类，并在其中设置颜色相关 CSS 属性，就能实现鼠标悬停变色。关键是确保选择器写法正确、样式优先级足够，且目标元素本身支持交互（如链接、按钮或设置了 cursor: pointer 的普通元素）。
基础写法：给链接文字变色
这是最常见也最简单的用法：
a {
color: #333;
}
a:hover {
color: #007bff;
}
说明：默认黑色文字，鼠标移上去变成蓝色。浏览器原生支持 <a> 标签的 :hover，无需额外设置。
给按钮或普通盒子加悬停效果
非链接元素（如 <div>、<button>）也能用 :hover，但要注意两点：
立即学习“前端免费学习笔记（深入）”；
- 元素必须能被用户“悬停”，通常需有明确交互意图（比如加
cursor: pointer提示） - 避免对不可交互的静态内容滥用
:hover，影响可访问性
示例：
.card {
background-color: #f8f9fa;
padding: 16px;
border-radius: 4px;
cursor: pointer;
}
.card:hover {
background-color: #e9ecef;
color: #212529;
}
配合 transition 实现平滑过渡
单独用 :hover 会立刻变色，加上 transition 更自然：
nav a {
color: #495057;
transition: color 0.2s ease, background-color 0.2s ease;
}
nav a:hover {
color: #007bff;
background-color: #f1f5f9;
}
说明：transition 要写在**默认状态**里（不是 :hover 中），否则悬停时不会渐变，离开时也不会回弹。
注意层级与继承问题
如果悬停没反应，先检查这几个点：
- 是否被其他更具体的样式覆盖？尝试加
!important临时测试（上线前应优化选择器） - 父元素是否设置了
pointer-events: none？这会让子元素无法触发:hover - 元素是否被遮挡（如 z-index 过低、透明度为 0、或有绝对定位盖住）
- 是否在移动端误以为失效？
:hover在触屏设备上行为不一致，建议搭配:active或用 JS 增强
