"父元素悬停时如何触发lottie悬停？"

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+50声望赏金。 codebarz希望引起对这个问题的更多关注。

当带有 className classes.card 的 div 悬停在上面时，我希望 lottie-player 开始悬停。 现在，只有当我在实际图标上时，动画才会悬停。 如果我添加填充/边距，它不会增加触发悬停的区域。

当带有 className classes.card 的 div 悬停在上面时，如何让 lottie-player 开始动画？

<div className={classes.card}>
      <div className={classes.icon}>
        <lottie-player
          id={iconNumber}
          src={animations.account_services[iconNumber].url}
          style={{ width: '50px', height: '50px' }}
          hover
        />
      </div>
      <Typography className={classes.cardText}>{text}</Typography>
    </div>

Answer 1

我们可以使用mouseenter<\/a>和mouseout<\/a>事件：