英文:
Bootstrap custom background
问题
我对Bootstrap还不熟悉，我遇到了这个问题。
基本上，我想要在鼠标悬停时更改容器的背景，但似乎做不对。
HTML
<div class="container bg-black h-25 w-25 box"></div>
CSS
.box:hover{
background-color: red;
box-shadow: 5px 5px red;
}
起初，我以为可能选择不正确，然后我得到了阴影，但背景仍然没有改变。
悬停前
悬停后
我尝试过的
我浏览了官方文档，甚至阅读了这篇文章的答案 stackoverflow，但我还是卡住了。
任何帮助都将非常有用，非常感谢！
英文:
I'm new to bootstrap and I'm getting this.
So basically I want to change my background of a container using hover but I can't seem to get it right.
HTML
<div class="container bg-black h-25 w-25 box"></div>
CSS
.box:hover{
background-color: red;
box-shadow: 5px 5px red;
}
at 1st I thought I might not be selecting it right then I am getting the shadow but the background still not changing.
Before Hover
After Hover
What I tried
I skimmed through the official documentation and even read the answers to this article stackoverflow but im still stuck
any kind of help would be useful and thanks a bunch
答案1
得分: 1
在查看了Bootstrap 5的CSS文件后，发现背景颜色被标记为!important，这基本上意味着大多数CSS规则都不起作用，但我们可以通过使用 `div.your-class` 来稍微提高特异性，并且还可以像以下示例中一样使用!important：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.container {
color: yellow;
margin-bottom: 1rem;
border-radius: 0.25rem;
padding: 0.125rem;
}
.black {
background-color: red !important;
}
/* 我们通过使用 div.classname 来略微提高此规则的特异性，使其现在覆盖了Bootstrap中的CSS规则 */
div.black-importanter {
background-color: red !important;
}
<!-- 语言: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class='container black bg-dark'>Nope!</div>
<div class='container black-importanter bg-dark'>Yay!</div>
<!-- 结束代码片段 -->
英文:
Having had a dig around the Bootstrap 5 css file and background colours are tagged as !important so that pretty much means most css rules won't work but we can increase the specificity a touch by using div.your-class and also use !important as in the following example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
color: yellow;
margin-bottom: 1rem;
border-radius: 0.25rem;
padding: 0.125rem;
}
.black {
background-color: red !important;
}
/* we nudge the specificity of this rule up a smidge using div.classname so it now overrides the css rule in Bootstrap */
div.black-importanter {
background-color: red !important;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class='container black bg-dark'>Nope!</div>
<div class='container black-importanter bg-dark'>Yay!</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论