Question

我使用Create React App并为我的社交图标添加了svgs。

单击图标后，将打开一个新选项卡。当用户返回带有网站的选项卡时，悬停颜色仍然存在，直到鼠标在屏幕上移动。因此，如果用户返回选项卡但将鼠标放在浏览器的导航栏中，您将看到悬停颜色仍然存在。当我使用active focus或visited在悬停或点击前重置颜色时，这仍然存在。

如果用户仅悬停并停留在页面上，则表示没问题。用户点击后返回到悬停颜色的网站。

我不确定是什么原因引起的。也许是因为我改变CSS中的样式而不是使用mouseMove事件做出反应？但是，我不确定如何使用React事件执行我在CSS中所做的事情，因为我必须在a标记上设置事件并查看{{1上反映的颜色更改标签。

有人可以解释一下为什么会发生这种情况以及围绕这个问题的最佳做法吗？

CSS

path

或代替主动使用：

a:hover path {
  fill: #f40ef0;
}

a:active path {
  fill: #fff;
}

JS

a:focus path {
  fill: #fff;
}

更新：这只发生在iOS 10（不是网络）上的Chrome网页浏览器和Safari上

Answer 1

也许试试这个：

a:visited path{
  fill: #FFFFFF;
}
a:hover path {
  fill: #f40ef0;
}
a:active path {
  fill: #fff;
}

这样您访问过的标签就会保持相同的颜色。因为现在您的悬停颜色与大多数浏览器的默认访问颜色相同。