Bootstrap如何修改默认的全局链接（Link）悬停颜色-Bootstrap教程-PHP中文网

只改 --bs-link-hover-color 变量悬停色不变，因其仅作用于 bootstrap 组件类（如 .nav-link），对原生标签无效；需显式声明 a:hover, a:focus { color: var(--bs-link-hover-color); } 并确保深色模式、激活态变量及选择器权重正确。

bootstrap如何修改默认的全局链接（link）悬停颜色

只改 `--bs-link-hover-color` 变量为什么悬停色没变

因为该变量仅作用于 Bootstrap 自己的组件类（如 .nav-link、.btn-link），对原生 <a></a> 标签完全无效——它走的是浏览器默认样式链，不读取这个变量。你看到悬停还是蓝色或紫色，不是变量没生效，而是根本没被应用到目标元素上。

必须同步声明：a:hover, a:focus { color: var(--bs-link-hover-color); }

漏掉 a:focus 会导致键盘用户 Tab 导航时无视觉反馈，可访问性不达标
如果项目用的是 Bootstrap 5.0–5.1，--bs-link-hover-color 还不存在，得退回纯 CSS 覆盖方案
深色模式下（data-bs-theme="dark"），该变量可能未被重设，悬停色在暗背景上发灰或不可读

`a:hover` 和 `a:focus` 必须一起写，不能只写 hover

单独写 a:hover { color: #059669; } 看似能改鼠标悬停色，但会忽略焦点状态，破坏键盘导航体验。Bootstrap 5 的可访问性要求明确将两者视为等效交互态，且 :focus 在无障碍测试中是硬性检查项。

正确写法是：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

a:hover, a:focus {
  color: var(--bs-link-hover-color);
}

不要用 a:hover, :focus 这种错误写法——:focus 缺少元素限定，会匹配所有聚焦元素，污染全局
如果用了 Sass 编译，确保 $enable-dark-mode: true 已启用，否则深色主题下 --bs-link-hover-color 不会自动切换
某些 CMS 或框架（如 Joomla）会在 <a></a> 外层套 <li>，此时需补 li a:focus 才能覆盖

导航栏激活态（`.nav-link.active`）颜色不随悬停变量联动

--bs-link-hover-color 对 .nav-link.active 完全无效。这个状态由独立变量 --bs-navbar-active-color 控制，且仅从 Bootstrap 5.2+ 开始支持。

若已设 --bs-link-hover-color 但导航高亮仍是默认蓝，大概率是漏了这句：

:root {
  --bs-navbar-active-color: var(--bs-link-hover-color);
}

该变量只影响 Bootstrap 组件（.nav-link、.dropdown-item），手写的 <a class="active"></a> 仍需额外处理
如果激活类加在 <li class="nav-item active"> 上，选择器必须写全：.nav-item.active .nav-link，不能只靠 .nav-link.active
部分主题或插件会动态插入 style 标签覆盖 :root，建议用 !important 做兜底（仅限此变量）