Problem with changing properties of :hover-CodePudding

I'm unable to change background-color of list items to black while :hover. one the other hand there is no problem with changing color.

.nav li {
  display: inline-block;
  height: 100%;
  padding: 0px 35px;
  border-width: 0 1px 1px 0px;
  border-color: white;
  border-style: solid;
  box-sizing: border-box;
  line-height: 37px;
  background: linear-gradient(rgb(81, 59, 192) 26%, rgb(183, 172, 237))
}

.nav li:hover {
  background-color: black;
  color: black;
}

<ul >
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>dolor</li>
  <li>amet</li>
</ul>

CodePudding user response：

Your background color is behind your linear gradient. Change it from background-color to just background if you want to override the entire background.

CodePudding user response：

The background shorthand property sets a number of different properties.

A linear-gradient is a type of background-image not a background-color.

Setting background-color: black appears to have no effect because it is covered up by the background-image.

Remove the image (background-image: none) so you can see the colour.

.nav li {
  display: inline-block;
  height: 100%;
  padding: 0px 35px;
  border-width: 0 1px 1px 0px;
  border-color: white;
  border-style: solid;
  box-sizing: border-box;
  line-height: 37px;
  background: linear-gradient(rgb(81, 59, 192) 26%, rgb(183, 172, 237))
}

.nav li:hover {
  background-color: black;
  background-image: none;
  color: black;
}

<ul >
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>dolor</li>
  <li>amet</li>
</ul>