悬停时更改字段背景（HTML、CSS）

Question

我已经为此苦苦挣扎了几天，无法找到答案：我试图在悬停时简单地更改框的背景。我已设法为文本执行此操作，但框的其余部分没有更改。

The link to the problem can be seen here

这是我的当前代码： HTML

<html lang="en">
  <head>

    <link rel="stylesheet" type="text/css" href="spanish.css"
    media="all and (min-width: 1300px)"  />

    <div class="pricebox1">
      <a href="">Conversational Spanish</a>
    </div>

  </body>
</html>

CSS

.pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1 :hover {
  background: #ffffff;
  color: red;

What am I doing wrong?

Answer 1

这个？在.pricebox1 :hover {}中不是background而是background-color

    .pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1:hover {
  background-color: white;
  color: red;
}

<div class="pricebox1">
    <a href="">Conversational Spanish</a>
    </div>

如果您想同时更改文本的颜色，只需执行以下操作：

.pricebox1 > a:hover{
  color: red;
}

    .pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1:hover {
  background-color: white;
}

.pricebox1 > a:hover{
  color: red;
}

<div class="pricebox1">
    <a href="">Conversational Spanish</a>
    </div>

Answer 2

避免 .pricebox1 :hover 中的 space - 使其 .pricebox1:hover 在悬停时更改 .pricebox1 的背景。

您必须为 link 创建一个单独的 a:hover 规则，然后才能更改文本颜色。

Answer 3

从我的角度来看，代码运行良好。您唯一需要更改的是 .pricebox1 中的锚点，因为默认值为 styling.e.g.

.pricebox1 a:hover{
   color: red;
}

Answer 4

您的代码 .pricebox1 :hover 没有 select .pricebox1 的 :hover 状态。它指向.pricebox1的children的:hover状态。因此，它不会改变框的颜色。

如果要 child 的 hover 状态更改 parent 的背景，这是不可能的，因为 "Cascading Style Sheets only supports styling in cascading direction, not up"

因此，您可以使用 .pricebox1:hover 更改 pricebox1 的背景颜色，并使用 .pricebox1:hover a 更新内部 a 的样式。

您可以使用变通解决方案here

否则，当child悬停时，您需要使用Javascript来更新parent的样式，而不仅仅是css

悬停时更改字段背景（HTML、CSS）

changing background of a field on hover (HTML, CSS)

html

css

mousehover