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

Question

Наведите указатель мыши на .parent и изменяется цвет фона (работает).
Наведите указатель мыши на '.child' и изменяется цвет фона (работает).
Я хочу навести курсор на .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>

_{Свободный перевод вопроса how to change background color inside element of div on hover effect? от участника @Aziz Erel.}

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>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

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

Ответы (1 шт):