根据父鼠标悬停填充子对象的背景

.parent:hover {
  background-color: #f00; /* 改变背景颜色为红色 */
}

<div class="parent">
  <div class="child">子对象</div>
</div>

.child {
  background-color: #000; /* 设置子对象的背景颜色为黑色 */
}

var parent = document.querySelector('.parent');
var child = document.querySelector('.child');

parent.addEventListener('mouseover', function() {
  child.style.backgroundColor = '#0f0'; /* 改变子对象的背景颜色为绿色 */
});

parent.addEventListener('mouseout', function() {
  child.style.backgroundColor = '#000'; /* 恢复子对象的背景颜色为黑色 */
});