如何通过悬停在每个分离的兄弟组件上同时激活几个悬停事件？

【问题标题】：How can I active several hover event in some separated sibling components simultaneously by hovering on each of them?如何通过悬停在每个分离的兄弟组件上同时激活几个悬停事件？
【发布时间】：2021-12-11 09:08:58
【问题描述】：

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

【问题讨论】：

我想我们需要看看一些代码。
为三个元素的父级添加:hover样式规则。

标签： javascript css reactjs sass styles

【解决方案1】：

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

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>

你可以阅读更多关于:hoverhere，以及关于css选择器 here

【讨论】：