悬停在不改变背景颜色的按钮上

Question

我有两个问题，但最主要的是我在按钮上悬停会改变文本的颜色但不会改变背景颜色，我不知道如何解决它。

第二个问题是我不得不把它自己的背景放在一边，它看起来不太好，但如果不直接我不抓到正常的背景放在一边（我不知道是否有什么办法可以解决这个问题，以便它使用相同的背景）。

aside {
  font-family: Anderson;
  width: 15%;
  background: rgb(106, 36, 108);
  background: linear-gradient(357deg, rgba(106, 36, 108, 1) 5%, rgba(57, 26, 84, 1) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-image: url(../Imagenes/Logo.png);
  background-size: 80%;
  background-position: top;
  background-position-y: 10px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

aside a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 26px;
}

aside a:hover {
  background-color: #ddd;
  color: black;
}

aside a.active {
  color: white;
  text-decoration: dotted;
  background: rgb(106, 36, 108);
}

aside button {
  font-family: Anderson;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 26px;
  background: rgb(106, 36, 108);
  background: linear-gradient(357deg, rgba(106, 36, 108, 1) 5%, rgba(57, 26, 84, 1) 100%);
  border-style: none;
  cursor: pointer;
}

aside button:hover {
  color: black;
  background-color: #ddd !important;
}

<aside>
  <p></p>
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="Formulario.html"><i class="fa fa-wpforms"></i>&nbsp;&nbsp;Account</a>
  <button class="btn-toggle"><i class="fa fa-fw fa-home darkmode"></i> Light Mode</button>
  <a href="#"><i class="fa fa-fw fa-home"></i> About us</a>
</aside>

Answer 1

“正常”风格是这样的：

background: linear-gradient(357deg, rgba(106, 36, 108, 1) 5%, rgba(57, 26, 84, 1) 100%);

悬停样式是这样的：

background-color: #ddd !important;

background

速记属性可让您一次设置不同的

background-something

属性的选择。

linear-gradient

s是

background-image

s，并且

background-image

s被渲染在

background-color

s.

所以你的悬停样式正在应用，但你看不到它，因为它被渐变覆盖了。

将悬停样式更改为：

background: #ddd;

这会将

background-color

设置为

#ddd

和

background-image

到

none

所以你将能够看到

background-color

。

Answer 2

你的按钮的问题是你使用背景定义了它的正常状态：和使用背景颜色的悬停状态： - 它们不匹配。

如果您将其切换为：

aside button:hover {background: #ddd}

它将解决问题，您也将不需要 !important.