HTML5不支持hover和过渡动画，需用CSS3的:hover伪类和transition属性实现：基础悬停切换样式、transition控制渐变、transform实现高效位移缩放、opacity与visibility组合控制显隐、伪元素增强装饰效果。
如果您希望在网页中为元素添加鼠标悬停时的视觉变化，HTML5 本身不提供 hover 伪类或过渡动画功能，这些能力实际由 CSS3 提供。以下是使用 CSS3 的 :hover 伪类与 transition 属性实现平滑悬停效果的具体方法：
一、基础 hover 状态样式切换
通过 :hover 伪类可定义元素在鼠标指针移入时应用的样式规则，无需 JavaScript 即可触发状态变更。该方式适用于按钮、链接、图片容器等常见交互元素。
1、在 HTML 中为需要响应悬停的元素设置 class，例如
2、在
立即学习“前端免费学习笔记（深入）”；
3、添加 :hover 规则：.card:hover { background-color: #d0e8ff; }。
4、保存并刷新页面，在鼠标移入 .card 元素区域时，背景色将立即变为指定蓝色。
二、添加 transition 实现渐变过渡
单独使用 :hover 会导致样式突变，加入 transition 属性可控制属性变化的时间、缓动函数和延迟，使视觉反馈更自然。
1、在基础样式块中（非 :hover 块内）添加 transition 声明：.card { transition: background-color 0.3s ease-in-out; }。
2、确保 :hover 中修改的属性名与 transition 指定的属性完全一致，例如 background-color、transform 或 opacity。
3、若需同时过渡多个属性，可用逗号分隔：transition: background-color 0.3s, transform 0.2s, opacity 0.25s;
4、避免对所有属性使用 all 进行过渡，因其可能引发性能问题或意外动画。
三、使用 transform 实现位移与缩放悬停
transform 属性在悬停中常用于创建卡片上浮、图标放大等轻量级动效，它不触发重排，渲染效率高于修改 width 或 top 等布局属性。
1、为元素设定初始 transform 值，例如 .icon { transform: scale(1); }。
2、在 :hover 中覆盖该值：.icon:hover { transform: scale(1.15) translateY(-2px); }。
3、配合 transition 设置 transform 的过渡时间：transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);。
4、注意 transform 值必须完整书写，多个函数需按顺序组合，不可拆分为独立声明。
四、结合 opacity 与 visibility 控制显示隐藏
当需要实现悬停显示子元素（如标题说明、操作按钮）时，opacity 与 visibility 的组合可兼顾过渡效果与可访问性。
1、将子元素设为默认隐藏：.tooltip { opacity: 0; visibility: hidden; }。
2、在父元素 :hover 下激活子元素：.parent:hover .tooltip { opacity: 1; visibility: visible; }。
3、为子元素添加 transition：.tooltip { transition: opacity 0.2s, visibility 0.2s; }。
4、visibility 不支持直接过渡，因此需搭配 opacity 使用；仅靠 visibility 变化会导致无动画的瞬时显隐。
五、伪元素悬停增强装饰效果
:before 和 :after 伪元素可在不增加 DOM 节点的前提下，生成悬停时的边框、遮罩层或图标，适合轻量级视觉强化。
1、为按钮添加伪元素：.btn::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #007bff; }。
2、在 :hover 中扩展宽度：.btn:hover::after { width: 100%; }。
3、为该伪元素添加过渡：.btn::after { transition: width 0.35s ease-out; }。
4、确保父元素设置 position: relative，以使伪元素能相对于其定位。
