如何通过将鼠标悬停在每个兄弟组件上来同时激活一些独立的兄弟组件中的多个悬停事件？

Question

我有三个独立的 React 组件（例如一个按钮、一个图像和一个段落），每个组件都在其独立的 scss 文件中设置了悬停事件样式。 所有组件都是兄弟。我希望这些悬停 事件中的每一个都可以通过悬停在任何其他 元素上来工作。可以通过 scss 还是我应该通过 React JS 来完成？我应该怎么做？

Answer 1

您可以在父元素上使用 :hover css 伪 class 来实现，并使用适当的子选择器指定规则集。例如：

div:hover img {
  /* some styling */
}

div:hover p {
  /* some styling */
}

div:hover button {
  /* some styling */
}

<div>
  <img />
  <p>some paragraph</p>
  <button>Press me!</button>
</div>

您可以阅读更多关于 :hover here, and about css selectors here