html - 如何在悬停效果时更改 div 元素内的背景颜色？

Question

1. 将鼠标悬停在“.parent”上并更改其背景颜色(有效)。
2. 将鼠标悬停在“.child”上并更改其背景颜色(有效)。
3. 我想将鼠标悬停在“.child”上并且仅更改 .child 背景颜色？我该怎么做？

.parent {
  background-color: #cde;
  width: 100%;
  position: relative;
  height: 100px;
}

.parent:hover {
  background-color: black;
}

.child {
  float: right;
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  background-color: #ff0000;
}

.child:hover {
  background-color: yellow;
}

<div class="parent">

  <span class="child">
		Click
	</span>

</div>

Answer 1

一个技巧是使用悬停时的子元素创建另一个图层来模拟父背景的不变。

这是一个带有 box-shadow 的示例 ( On hover of child, change background color of parent container (CSS only) )

.parent {
  background-color: #cde;
  width: 100%;
  height: 100px;
  position: relative;
  overflow:hidden;
}

.parent:hover {
  background-color: black;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  background-color: #ff0000;
}

.child:hover {
  background-color: yellow;
  box-shadow:0 0 0 1000px #cde;
}

<div class="parent">

  <span class="child">
		Click
	</span>
</div>