悬停任何孩子时更改父背景颜色

Question

我正在创建数据网格样式布局（如图像）。并且一般的样式结构如下。

问题：无论如何，我可以在悬停行的任何部分时更改 parent 的背景颜色吗？

目前我只能在孩子上使用 :hover，所以只有那个框在改变颜色，而我希望整行在悬停时改变颜色。

PS： 我目前正在 javascript onMouseEnter 和 onMouseLeave 事件中实现这一点，但这并不好，因为它会在每次悬停/取消悬停触发时触发重新渲染。我在想是否有任何可用的 CSS 解决方案。

<div class="parent">
    <div class="wrapper"> <!-- fixed column -->
        <div class="child" />
    </div>
    <div class="wrapper">. <!-- scrollable column -->
        <div class="child" />
        <div class="child" />
        <div class="child" />
     </div>
</div>

.parent {
  background-colour: red;
  :hover {
     background-colour: blue;
  }
}