Bootstrap容器hover时背景色无法修改的问题求助

我是Bootstrap新手，想要实现容器在hover状态下切换背景色，但始终无法成功。当前代码中，hover时阴影效果正常生效，但背景色并未改变。

代码示例 #

HTML #

<div class="container bg-black h-25 w-25 box"></div>

CSS #

.box:hover{                                    
  background-color: red;                                    
  box-shadow: 5px 5px red; 
}

一开始我以为是选择器的问题，但阴影正常显示说明选择器没问题。我已经查阅了Bootstrap官方文档，也看过Stack Overflow上的相关文章，但仍然无法解决问题。附上hover前后的截图：

Hover前

Hover后

解决方法 #

核心原因是Bootstrap自带的bg-black类优先级高于你自定义的.box:hover选择器——Bootstrap的bg-black直接给元素设置了background-color，而你的hover样式权重不够，所以背景色被覆盖；阴影能生效是因为Bootstrap没有给元素预设box-shadow样式，不需要覆盖就能直接生效。

你可以用以下几种方式解决：

1. 提高选择器权重（推荐） #

修改CSS选择器，让它的优先级超过bg-black：

.box.bg-black:hover {                                    
  background-color: red;                                    
  box-shadow: 5px 5px red; 
}

同时使用两个类选择器+伪类，权重比单个bg-black类更高，就能成功覆盖背景色。

2. 自定义初始背景色，替换Bootstrap类 #

如果不想依赖Bootstrap的bg-black，可以自己定义初始背景色：

<div class="container h-25 w-25 box"></div>

.box {
  background-color: black;
}
.box:hover{                                    
  background-color: red;                                    
  box-shadow: 5px 5px red; 
}

这样hover样式可以直接覆盖自己定义的初始背景色，不会有优先级冲突。

3. 使用!important（不推荐，仅应急） #

在背景色属性后加!important强制覆盖：

.box:hover{                                    
  background-color: red !important;                                    
  box-shadow: 5px 5px red; 
}

这种方式会破坏CSS优先级规则，后续维护容易出现样式冲突问题，尽量避免使用。

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