如何通過其父級觸發子級 object 上的 hover 事件？

Question

我編寫了一個自定義反應組件，它在：hover 上有一個 animation。 該組件是不同父組件的子組件。 我想做的是在將鼠標懸停在父組件上時觸發孩子的:hover 。 是否可以通過 css 模擬它（如果不是，那么如何實現）？

測試用例：我有一張博客明信片，當鼠標懸停在上面時會變亮。 在其中，以子元素的形式，我有一個 Link/a 組件，它有自己的 css/:hover animation 並且在單擊時重定向到給定的 href 頁面。 我想要實現的效果是在懸停在父元素上時為兩個元素（而不僅僅是父元素）設置動畫，並在單擊父元素時觸發子元素的單擊事件。

Answer 1

如果您可以共享代碼會更容易解釋，但您可以在父組件主包裝器/div 中設置onMouseEnter事件，並在此事件中設置 boolean state。 然后在子組件的主包裝器/div 中，您可以獲得 className 作為道具，您可以設置由此 state（真或假）控制的條件類名，並在 css 中進行必要的修改。

條件類名的示例

className={`${isOnHover ? "hoverClass" : "noHoverClass"}`}