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

Posted 2023-03-21

【中文标题】如何在 Bootstrap 5 中更改导航栏品牌 a:hover 背景颜色

【英文标题】：How to change the navbar-brand a:hover background-color in Bootstrap 5

【发布时间】：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

【参考方案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，确保您按照代码片段中的指示先按运行