HTML CSS - 使图标在单击时改变颜色（类似于 link）

Question

当您单击 link 时，它通常会变为紫色，这样您就知道您已经单击了 link。通常在您刷新或离开页面后重置。有没有办法让图标（SVG 或）在单击时表现得像 link？而不仅仅是最后一个点击。这将是每个被点击的图标。我试图使用 :visited 伪，但它没有用。

.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

像这样并在# 之后为每个要使用它的元素使用不同的数字。

.visit {
  fill: lightblue;
}

a:visited .visit {
  fill: green;
}

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

Answer 2

如果我没有正确理解你的问题，你可以使用 active 伪。这将使 link 在这种情况下处于活动状态（即单击）时变为绿色。

有关 active 伪的更多信息，请参阅 this 网站

a {
  padding: 10px;
}
  
.visit {
  fill: lightblue;
}

.visit:active {
  fill: green;
}

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

Answer 3

:visited 是一个 link 相关的伪 class。它必须应用于 <a> 标签。

.visit {
  fill: lightblue;
}

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

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

Answer 4

这是一个工作示例！

.box {
  width:  300px;
  height: 300px;
}

.box * {
  width: 100%;
  height: 100%;
}

.box .visit {
  fill: #ccc;
}

.box:link .visit {
  fill: #999;
}

.box:hover .visit {
  fill: #3f9;
}

.box:active .visit {
  fill: #f93;
}

.box:visited .visit {
  background: #39f;
}

<a href="#" class='box'>
  <svg>
    <rect class='visit'>
    </rect>
  </svg>
</a>

HTML CSS - 使图标在单击时改变颜色（类似于 link）

HTML CSS - Make icon change color when clicked (like a link)

html

javascript

css

jquery

visited