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就能实现这个功能的话，那将更好。

- tneilson08

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>

- acemir

---

啊，那就是问题所在。谢谢！ - tneilson08

Answer 2

像这样，在＃后使用不同的数字，以便在您想要使用此功能的每个元素上使用它。

.visit {
  fill: lightblue;
}

a:visited .visit {
  fill: green;
}

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

- Talmacel Marian Silviu

Answer 3

如果我理解你的问题正确，你可以使用active伪类来实现。这将使得当链接处于活动状态（即被点击）时，在这种情况下变为绿色。

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

- Mike Donkers

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>

- acyclone