直接用 :hover 伪类即可实现悬停效果，无需 JavaScript；需配合 transition 实现动画，为非交互元素添加 cursor: pointer 提升可靠性，注意兼容性与移动端适配。
怎么用 :hover 给元素加悬停效果
直接给目标元素写 :hover 伪类样式就行，不需要 JavaScript。它只作用于支持鼠标的设备（桌面端），移动端默认不触发（除非模拟 hover 的特殊场景）。
-
:hover必须写在对应选择器的后面，比如a:hover、.btn:hover，不能单独写:hover - 只能作用于「用户可交互」的元素（如
<a></a>、<button></button>、<div> 等均可，但 <code><span></span>默认无交互行为，需加cursor: pointer或tabindex才稳定响应） - 过渡动画要显式加
transition，否则样式变化是瞬时的
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
transition: background-color 0.2s ease, transform 0.15s ease;
}
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
:hover 不生效的常见原因
不是 CSS 写错了，大概率是被其他规则覆盖、或元素本身不满足触发条件。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父元素有
pointer-events: none，会阻止所有子元素的 hover（包括<a></a>） - 目标元素没有设置
display或被visibility: hidden/opacity: 0遮盖（注意：opacity: 0仍可触发 hover，visibility: hidden不行） - CSS 优先级不够：比如用类名写的
.nav-item:hover被标签选择器a:hover覆盖了，就加!important或提升选择器权重 - 在 Chrome 等浏览器的「移动设备模拟」模式下，hover 可能被禁用或延迟触发，真机测试才准
给图片、链接、按钮以外的元素加 hover 效果
纯静态 HTML 中，<div>、<code><section></section>、<article></article> 这些容器默认没交互语义，但加一行 cursor: pointer 就能让用户意识到“可悬停”，也能让 hover 更可靠。
- 必须确保该元素有明确尺寸（比如设置了
width/height或内容撑开），否则 hover 区域为 0 - 若元素内含子元素遮挡（如绝对定位的图层），可能拦截鼠标事件，需检查
z-index和pointer-events - 想让文字链接悬停时下划线变色又不跳动，推荐用
text-decoration: underline solid #007bff+text-underline-offset控制位置
div.card {
padding: 16px;
border: 1px solid #e0e0e0;
cursor: pointer;
transition: border-color 0.2s;
}
div.card:hover {
border-color: #007bff;
box-shadow: 0 2px 6px rgba(0,123,255,0.1);
}
兼容性与性能提醒
:hover 在所有现代浏览器中都支持，IE8+ 也支持，但 IE8 不支持对非 <a></a> 元素使用（所以老项目慎用在 <div> 上）。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>避免在 <code>:hover 中触发重排（reflow），比如改 height、width、margin；优先用 transform、opacity、background-color 这类只触发布局或绘制的属性
<li>）上逐个写 hover 动画，CSS 引擎会批量处理，但过度复杂样式仍可能卡顿transition 声明和 cursor: pointer 提示，这两处一补，90% 的 hover 问题就解决了。
