鼠标悬停时反应改变反应图标颜色

当我用鼠标悬停在反应图标上时，我想更改反应图标的颜色。使用下面给出的代码，只有当鼠标悬停在图标的线条上时，图标才会改变颜色。例如，对于邮件图标，只有当光标悬停在图标的线条上而不是空白处时，颜色才会改变。如果我将鼠标悬停在图标的任何部分上，如何使图标改变颜色？

<AiOutlineMail size="80px"
    onMouseOver={({target})=>target.style.color="white"}
    onMouseOut={({target})=>target.style.color="black"}
/>

将图标包裹在 span 或 div 中并设置该元素的样式。还推荐使用 CSS:hover属性而不是使用 JS 来跟踪鼠标。

<span class="changeColor">
  <AiOutlineMail size="80px"
    onMouseOver={({target})=>target.style.color="white"}
    onMouseOut={({target})=>target.style.color="black"}
  />
<span>

然后在CSS中：

.changeColor {
  color: black;
}
.changeColor:hover {
  color: white;
}