如何在 Bootstrap 5 中更改导航栏品牌 a:hover 背景颜色答案

【问题标题】：How to change the navbar-brand a:hover background-color in Bootstrap 5如何在 Bootstrap 5 中更改导航栏品牌 a:hover 背景颜色
【发布时间】：2021-08-11 03:20:21
【问题描述】：

我正在使用 Bootstrap 5 构建一个 ruby on rails 应用程序。我试图在悬停时更改 navbar-brand 类锚的背景颜色。我可以很好地更改常规的非锚定背景颜色。但是为什么 a:hover 背景没有改变呢？

  .navbar-brand {background-color: #0f0; } /* works */
  .navbar-brand a:hover {background-color: #f00;} /* doesn't work */

这可能很简单。我只是没看到。谢谢

【问题讨论】：

您是否查看了浏览器中的检查器窗格，以查看样式窗格是否提供任何类型的信息i，说明为什么该规则可能会被覆盖？
您是否尝试过为您的锚标签添加一个类、唯一的类并使用它，例如<a class="unique-class"> 然后.unique-class:hover

标签： css twitter-bootstrap

【解决方案1】：

可能是因为 Bootstrap 的 css 有has more weight

T尝试添加!important

   a.navbar-brand:hover {background-color: #f00 !important;}

【讨论】：

!important 没有修复它。似乎它没有在锚点上接班。如果我只是使用 a:hover 而不使用实际的 .navbar-brand 类，它可以工作（但也会为每个锚点更改它。）如果我将它包装在一个 div 中它可以工作。
实际上这似乎不适用于非引导锚。示例：w3schools.com/code/tryit.asp?filename=GQQURTGHXALQ
.one:hover { background-color: yellow; } 在链接的 w3schools 代码中工作，因为 a 标签的类为 .one
它没有。 .one 应该是黄色的。没有类的样式是绿色的。
确实如此，检查一下：w3schools.com/code/tryit.asp?filename=GQQV12H0BW2K，确保您按照代码片段中的指示先按运行