HTML CSS - 單擊時使圖標更改顏色（如鏈接）

Question

當您單擊一個鏈接時，它通常會變為紫色，因此您知道您已經單擊了該鏈接。 通常在刷新或離開頁面后重置。 有沒有辦法讓一個圖標（SVG 或 ）在點擊時表現得像一個鏈接？ 而不僅僅是最后一個點擊。 這將是被點擊的每一個圖標。 我試圖使用:visited 偽，但它不起作用。

 .visit { fill: lightblue; }.visit:visited { fill: green; }

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

jQuery 和 JavaScript 的答案很好，但如果有辦法只用 HTML 和 Z2C56C360580485DFBED23 來做到這一點，那7242 會是首選。

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>

Answer 2

像這樣並在 # 之后為要使用它的每個元素使用不同的數字。

 .visit { fill: lightblue; } a:visited.visit { fill: green; }

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

Answer 3

如果我正確理解了您的問題，您可以為此使用active偽。 在這種情況下，這將使它在鏈接處於活動狀態（即單擊）時變為綠色。

有關active偽的更多信息，請參閱此站點

 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 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>