如何通過將鼠標懸停在一些單獨的同級組件中同時激活它們中的每個懸停事件？

Question

我有三個獨立的 React 組件（例如一個按鈕、一個圖像和一個段落），每個組件在其單獨的 scss 文件中都有其懸停事件的樣式。 所有組件都是同級的。 我希望這些懸停事件中的每一個都通過懸停在任何其他元素上來工作。 是否可以通過 scss 或我應該通過 React JS 來完成？ 我該怎么做？

Answer 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>

您可以在此處閱讀有關:hover更多信息，以及在此處閱讀有關css 選擇器的更多信息