Как применить child:hover, но не parent:hover

Со следующим HTML, когда я нависаю над ребенком, я получаю зеленый фон на родителе. Как я могу мешать этому произойти? Я действительно хочу зеленый фон, если я толплюсь за пределами дочернего элемента.

CSS3 прекрасен.

.parent {
  padding: 100px;
  width: 400px;
  height: 400px;
}

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

.child {
  padding: 100px;
  width: 200px;
  height: 200px;
}

.child:hover {
  background-color: blue;
}
<div class="parent">
  <div class="child">Child</div>
</div>
11
задан Calvin Nunes 3 October 2019 в 14:26
поделиться