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

Question

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

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

Answer 1

将图标包装在 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;
}