The :hover effect does not work if the background color was previously specified in the styles-CodePudding

ul li {
  background: blue;
}

ul li: hover {
  color: pink;
  background: red;
}

<ul >
  <li  style="width: 80px;height: 30px;padding-top: 3px;background: blue;">GAMES</li>
  <li  style="width: 80px;height: 30px;padding-top: 3px;background: #929292;">ABOUT</li>
</ul>

After setting the color to blue in the first block, it is set, but the :hover action doesn't work. BUT when I remove background: blue from the first block, it works, how can I fix it?

P.S - text-color working

CodePudding user response：

Because you're having an inline style for the background color.

You should remove the inline style or add an !important to your hover effect.

CodePudding user response：

I tested your code. You should edit your CSS code and add !important like this :

ul li:hover {
  color: pink;
  background: red !important;
}

<ul >
  <li  style="width: 80px;height: 30px;padding-top: 3px;background: blue;">GAMES</li>
  <li  style="width: 80px;height: 30px;padding-top: 3px;background: #929292;">ABOUT</li>
</ul>