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

Answer 2

如果我正确理解了你的问题，你可以使用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 3

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

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

<a href="#1"><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>