Question

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

我看过这个jsfiddle，它似乎完成了我想要的大部分工作。我只需要将当前背景换成背景图像，然后添加一个链接，即可转到新的网址：

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选择器可以使您处于正确的轨道。使用background-image切换标签中的图像：

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>

仅使用CSS交换图像，并且一旦交换就在图像上具有链接

1 个答案: