如何修改Bootstrap 4导航栏navbar链接悬停时的颜色

链接鼠标悬停显示颜色修改方案 #

你现有编写的CSS规则仅能修改链接默认状态下的颜色，要实现鼠标悬停时的颜色切换，需要配合CSS的:hover伪类使用。

你的现有HTML结构参考：

<nav>
  <a class="underline" href="welcome.html">./home </a>
  <a class="underline" href="about.html">./about </a>
  <a class="underline" href="projects.html">./projects </a>
  <a class="underline" href="ctf.html">./ctf's</a>
</nav>

可直接在CSS中添加如下规则，按需修改色值即可：

/* 保留你原有默认状态的链接样式 */
a[href] {
  color: #ffff; /* 此处为链接默认显示颜色，可自行调整 */
  transition: color 0.2s ease; /* 可选配置，添加颜色切换过渡效果，交互更柔和 */
}

/* 新增鼠标悬停状态的样式规则 */
a[href]:hover {
  color: #ff7f50; /* 此处修改为你想要的悬停显示颜色即可，示例为珊瑚橙色 */
}

如果不需要影响页面其他位置的链接，仅对导航栏内的链接生效，可以缩小选择器范围：

nav a[href]:hover {
  color: #自定义色值;
}

内容的提问来源于stack exchange，提问作者user10827429