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

时间:2021-07-30 19:18:35

标签: css

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

问题:无论如何,我可以在悬停行的任何部分时更改 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>

enter image description here

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

0 个答案:

没有答案