仅使用 CSS 进行图像交换，并在交换图像后具有链接

Question

我希望在仅使用CSS单击时交换图像。单击图像并进行交换时，单击新图像时应该有一个指向新 url 的链接，而不是像当前功能那样交换回来。

我看了一下这个jsfiddle，它似乎完成了我想要的大部分内容。我只需要将当前背景换成背景图像并添加一个指向新 url 的链接：

http://jsfiddle.net/4huzr/

.html

<input type='checkbox' name='thing' value='valuable' id="thing"/><label 
for="thing"></label> 

.css

input[type=checkbox] {
display:none;
}
input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
} 

有没有办法在交换的图像上有一个链接，以便在交换图像后转到新的 URL。

谢谢，我将不胜感激任何帮助。

Answer 1

使用input[type=checkbox]:checked选择器，您走在正确的轨道上。使用背景图像切换标签中的图像：

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
display:inline-block;
padding: 0 0 0 0px;
height:220px;
width:220px;
background-image: url(https://placeimg.com/220/220/any);
}
input[type=checkbox]:checked + label
{
background-image: url(https://placeimg.com/220/220);
}
.replacement{
display:none;
}
input[type=checkbox]:checked ~ a.original{
display:none;
}
input[type=checkbox]:checked ~ a.replacement{
display:inline-block;
}

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 
<br>
<a class="replacement" href="http://google.com">google.com</a>
<a class="original" href="http://stackoverflow.com">stackoverflow.com</a>