javascript - 悬停同级时更改组件的样式

我有一个简单的情况，如果box1悬停了，我希望box2将背景更改为黄色。

代码示例：

const Box = styled.div`
  height: 200px;
  width: 200px;
  background: blue;
`;

const Box2 = styled.div`
  height: 200px;
  width: 200px;
  background: green;
  margin-top: 20px;

  ${Box}:hover {
    background: yellow;
  }
`;

in render:
  <Box>Box 1</Box>
  <Box2>Box 2</Box2>

链接到代码预览：

https://stackblitz.com/edit/react-rvhgov

谢谢！

编辑上面的这个似乎不起作用，不知道为什么，它应该起作用？

最佳答案

根据渲染项目的不同，您可以使用不同的方法来完成此操作，但是正如我们在此处所看到的，可以使用adjacent sibling combinator（+）或general sibling combinator（〜）。所以你要做的就是替换这个

${Box}:hover {
  background: yellow;
}

与

${Box}:hover ~ & ${Box2}{
  background: yellow
}

更新

您可以访问实时编辑器here。