Background color not changing on hover in WordPress custom css

Question

I am using WordPress so I wrote the custom color to change the background color of the box on hover but it's not working

#project1 {
  height: 100px;
  width: 33.33%;
  background-color: red !important;
}

#project1:hover {
  background-color: blue;
  color: white;
}

<div id="project1"></div>

Answer 1

The !important rule is not being overwritten by a new rule that does not have !important.

Either remove !important from the first declaration, or if you absolutely have to keep it there, add it also to the :hover declaration.

#project1 {
  height: 100px;
  width: 33.33%;
  background-color: red !important;
}

#project1:hover {
  background-color: blue !important;
  color: white;
}

<div id="project1"></div>