javascript - Firefox 不会在点击时触发 css 焦点规则，而 Chrome 会。

Question

我正在尝试使用以下内容创建导航栏:

html:

<svg height="40" width="40">
  <a href="#">
    <circle cx="20" cy="20" r="20"></circle>
  </a>
</svg>
<svg height="40" width="40">
  <a href="#">
    <circle cx="20" cy="20" r="20"></circle>
  </a>
</svg>
<svg height="40" width="40">
  <a href="#">
    <circle cx="20" cy="20" r="20"></circle>
  </a>
</svg>

CSS:

a {
  color: #8899a6;
}

a:focus,
a:hover {
  color: #1da1f2;
}

circle {
  fill: currentcolor;
}

当您将鼠标悬停在链接上和单击它后，链接会变为蓝色。当我在 Chrome 中运行它时，它工作得很好。但是，它在 Firefox 中不起作用。有没有办法让这个在 Firefox 中工作？

Answer 1

当你把 a svg 中的元素, 它是使用 SVGAElement 创建的原型(prototype)，而不是 HTMLAnchorElement .并且 Firefox 没有实现 focus SVGAElement 上的方法，而 Chrome 有。

如果可以，您可以简单地切换 a 的顺序和 svg元素，如果它是在 svg 之外创建的，然后是你的 a元素将是可聚焦的。

<a href="#" tabindex="1">
  <svg height="40" width="40">
    <circle cx="20" cy="20" r="20"></circle>
  </svg>
</a>
<svg height="40" width="40">
  <a href="#">
    <circle cx="20" cy="20" r="20"></circle>
  </a>
</svg>
<svg height="40" width="40">
  <a href="#">
    <circle cx="20" cy="20" r="20"></circle>
  </a>
</svg>

https://jsfiddle.net/2vhnqec0/