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

您有什么理由需要专门使用SVG吗？因为只使用HTML和CSS就可以获得相同的结果。

a,
a:link,
a:visited,
a:hover,
a:active {
  background-color: #8899a6;
  display: inline-block;

  width: 40px;
  height: 40px;
  border-radius: 50%;
}

a:focus,
a:hover {
  background-color: #1da1f2;
}

<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

Answer 2

尚未能够创建css解决方案，但您应该可以使用javascript .querySelectorAll()，.forEach()，click事件

var a = document.querySelectorAll("svg a");
[].forEach.call(a, function(el, index) {
  el.onclick = function(e) {
    [].forEach.call(a, function(elem) {
      elem.style.color = "#8899a6"
    })
    this.style.color = "#1da1f2";
  }
})

jsfiddle https://jsfiddle.net/9xe4tu7p/1/

Answer 3

当您在a中放置svg元素时，会使用SVGAElement原型而不是HTMLAnchorElement创建它。 Firefox并没有在SVGAElement上实现focus方法，而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/

Firefox没有触发针对点击的CSS焦点规则。

3 个答案: