javascript - HTML CSS - 单击时使图标改变颜色(如链接)

Question

当您点击一个链接时，它通常会变成紫色，这样您就知道您点击了该链接。通常在您刷新或离开页面后重置。有没有办法让图标(SVG 或 )在单击时像链接一样？而不仅仅是最后一个点击。这将是每个被点击的图标。我试图使用 :visited pseudo，但它没有用。

.visit {
  fill: lightblue;
}

.visit:visited {
  fill: green;
}

<a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a>

jQuery 和 JavaScript 的答案很好，但如果有一种方法可以仅使用 HTML 和 CSS 来做到这一点，那将是首选。

Answer 1

:visited是链接相关的伪类。它必须应用于 <a>标签。

.visit {
  fill: lightblue;
}

a:visited .visit { /* Fix here */
  fill: green;
}

<a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a>