Как изменить цвет фона внутри элемента div на эффект наведения?

Question

1. Наведите '.parent' и измените backgroundcolor (работает).
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 ( При наведении на дочерний элемент изменить цвет фона родительского контейнера (только CSS) )

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