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

Question

1. 将鼠标悬停在“ .parent”并更改其背景颜色（有效）。
2. 将鼠标悬停在“ .child”上并更改其背景颜色（有效）。
3. 我要悬停“ .child”，仅更改.child backgroundcolor？我该怎么做？

.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>