html - 我想要我的标题的双悬停 CSS

Question

实际上，我的标题文字颜色是黑色，背景颜色是白色。但我需要，当将光标放在背景中时，它的悬停状态为蓝色，标题文本颜色变为白色。请你帮助我好吗。

悬停时:

Answer 1

如果该文本在您的框内(一个 child )，那么您可以这样做。如果你想为不同的文本添加不同的颜色，应该使用下面的代码片段

.box {
  width: 100%;
  height: 300px;
  border: 1px solid red;
}

.box:hover {
  background: blue;
}

.box:hover p {
  color: white;
}
.box:hover h1 {
  color:red;
  }

<div class="box">
  <h1>Title will become red on hover</h1>
  <p>
    Some text Here will become white on hover
  </p>
</div>

如果您想更改该框内的所有文本颜色，请使用 .box:hover { background-color:blue;color:white;}