I have recently started using bootstrap and I am facing an issue. I want to change the background of a container when hovering over it, but I am having trouble getting 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;
}
Initially, I thought I might not be selecting it correctly. Though I managed to get the shadow effect on hover, the background color still does not change.
Before Hover https://i.sstatic.net/gzrbZ.png
After Hover https://i.sstatic.net/6XnPC.png
What I have tried I went through the official documentation and also checked out answers on this stackoverflow post, but unfortunately, I am still stuck.
I would really appreciate any help or guidance. Thank you in advance!