Bootstrap如何让导航栏链接在鼠标移入时显示发光效果

导航链接:hover加box-shadow发光不生效，根本原因是Bootstrap默认.nav-link有transition限制且深色模式覆盖样式权重；必须在.nav-link常态规则中声明transition: box-shadow 0.2s ease，避免用all，并适配暗色模式媒体查询及移动端无hover特性。

导航链接:hover加box-shadow发光不生效？

直接写 .nav-link:hover { box-shadow: 0 0 8px #007bff; } 很可能没反应——不是代码错，是 Bootstrap 的默认 .nav-link 有 transition 限制，且部分主题（如深色模式）会覆盖你的样式权重。

1. 必须在常态规则里声明 transition，否则只有移入有光、移出瞬间熄灭：加 transition: box-shadow 0.2s ease; 到 .nav-link 基础样式中
2. 避免用 all：写成 transition: box-shadow 0.2s ease; 更精准，防止字体、背景等意外动画干扰
3. 发光颜色要和背景形成对比：浅底用蓝色系（#007bff），深底建议改用 #66b3ff 或 hsl(200,100%,70%)
4. 移动端无效是正常现象：iOS Safari 和 Android Chrome 不触发 :hover，别指望真机上看到发光

发光效果卡顿或边缘模糊？

发光动画卡顿，大概率是用了 text-shadow 或 filter: drop-shadow() ——这两者都走 CPU 渲染，尤其在低配设备上掉帧。真正平滑的做法只有一条：用 box-shadow + transform: translateZ(0) 强制 GPU 加速。

1. box-shadow 必须带 inset 或多层值才显“光晕感”，例如：box-shadow: 0 0 4px rgba(0,123,255,0.4), 0 0 12px rgba(0,123,255,0.2);
2. 加 will-change: box-shadow; 到 .nav-link 常态样式，提前提示浏览器该属性会变
3. 别给 <a> 直接设 border-radius 再发光——圆角会裁剪阴影，导致光晕不完整；改用 overflow: hidden 包裹容器更稳妥

暗色模式下发光消失？

Bootstrap 5.3+ 默认支持 @media (prefers-color-scheme: dark)，但它的 .navbar-dark .nav-link 样式里没预留 box-shadow 空间，你写的发光规则会被静默忽略。

1. 必须显式覆盖暗色模式：加媒体查询块，不要依赖继承
2. 示例写法：

   @media (prefers-color-scheme: dark) {.nav-link:hover {box-shadow: 0 0 6px #4dabf7, 0 0 16px rgba(77, 171, 247, 0.3);}}

3. 别用 !important 强顶——它会让后续主题切换或 JS 动态 class 失效，优先提高选择器 specificity，比如用 .navbar-light .nav-link:hover

发光和下拉菜单 hover 冲突怎么办？

当导航项同时是 .dropdown 且你启用了悬停展开时，.nav-link:hover 发光常被 .dropdown:hover .dropdown-menu 的层级或 JS 的 open class 干扰，导致光效一闪即逝或完全不触发。

1. 把发光逻辑绑定到 .dropdown 容器而非 .nav-link：写 .dropdown:hover .nav-link 替代单纯 .nav-link:hover
2. 如果用了 JS 控制 open 状态（比如 mouseenter/leave），确保 mouseleave 延迟 150ms 再关闭，否则鼠标从链接移到下拉菜单途中就熄光
3. 发光色别和下拉菜单边框撞色：若下拉菜单用 border-top: 2px solid #007bff，发光就换用 #5d8aa8 避免视觉粘连

发光效果本身很简单，难的是让它在各种上下文里稳定亮起来——尤其是和 Bootstrap 的 JS 行为、响应式断点、暗色模式共存时，得一层层拆开验证，而不是堆 CSS。