悬停时按钮的背景颜色没有完全改变答案

【问题标题】：Background color of the button not changing completely when hovered悬停时按钮的背景颜色没有完全改变
【发布时间】：2021-09-14 03:43:28
【问题描述】：

我一直在研究一个按钮，当我们将鼠标悬停在它上面时，它必须改变它的背景颜色。但不幸的是，我无法做到这一点。颜色更改仅限于文本。但我希望它适用于整个按钮的背景。我附上了 2 张描述我的确切问题的图片。

悬停在按钮上之前

悬停在按钮上后

在这里你可以看到按钮的背景颜色并没有完全改变。

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
body {
  background-color: white;
  display: flex;
  justify-content: center;
}

.button {
  border: 2px solid blueviolet;
  height: 30px;
  width: 70px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 5%;
  margin-top: 50%;
}

.text a {
  text-decoration: none;
  color: blueviolet;
  font-family: montserrat, sans-serif;
  font-weight: 600;
}

.text :hover {
  color: white;
}

.button :hover {
  background-color: blueviolet;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial- 
            scale=1.0">
  <title>Buttons</title>
  <link rel="shortcut icon" href="./Assets/Images/Button.png" type="image/x-icon">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="button">
    <p class="text">
      <a href="#">Click</a>
    </p>
  </div>

</body>

</html>

【问题讨论】：

这是因为您的 css 中有错误。它是按钮：悬停而不是按钮：悬停。删除空间
@Sfili_81，这只会改变背景颜色，不会改变文本颜色
显然，这只是他可以找到错误的一个例子

标签： html css web css-selectors

【解决方案1】：

删除类名和伪类之间的空格。将 .button :hover 替换为 .button:hover。

【讨论】：

【解决方案2】：

改变

.text :hover {
  color: white;
}

.button :hover {
  background-color: blueviolet;
}

到


.button:hover .text a {
  color: white;
}

.button:hover {
  background-color: blueviolet;
}

【讨论】：

没问题，css中的空格可以把选择器放在头上。