CSS SVG 悬停时会导致光标错误

Question

我试图将光标悬停在我网站上的 SVG 上时更改为指针。但由于某种原因，当我在它们之间跳转时，光标看起来很奇怪。有什么想法可能导致此问题以及如何解决它吗？

我使用的是 Firefox，当我将光标放在右侧的三个 SVG 上来回移动时，我看到出现两个水平条。我移动得越快，就越容易看到那些水平线。

这是我整理的显示问题的jsfiddle：https://jsfiddle.net/ztr4scfu/

.right > div > svg:hover {
  cursor: pointer;
  fill: orange;
}

我从另一个网站复制了这些 SVG 代码/路径，他们没有这个问题。当我删除悬停效果时，我没有这个问题。

Answer 1

你可以做的就是让它看起来正常的是

.right:hover {
  cursor: default;
}

我猜你的问题是图标之间的光标是文本，这应该可以解决它。