Question

此代码是我用来尝试单击一次交换图像，然后向显示的图像添加另一个单击的代码，它将直接指向新的网址。但是，只有当所显示的图像显示在交换中时，此选项才应处于活动状态。

关于仅需要通过CSS进行处理的事实，是由于我想使其在电子邮件中工作并且Javascript被剥离。

这更清晰吗？谢谢。

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            #example-five {
                position: relative;
            }
            #example-five-checkbox {
                display: none;
            }
            #example-five-checkbox:checked + #example-five:after {
                content: '<img src = "https://via.placeholder.com/150?text=Hide" />';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: white;
             }
        </style>
    </head>
    <body>
        <input type="checkbox" id="example-five-checkbox" />
        <label id="example-five" for="example-five-checkbox"><img src = "https://via.placeholder.com/150?text=Show" /></label>
    </body>
</html>

Answer 1

我们可以在这里利用:target伪类。

将图像容器完全放在父容器中，并定位在左上方。给带有外部链接的第二张图片一个z-index，该图片通常会覆盖第一张图片。现在，用display:none隐藏第二张图像。添加从第一张图片到第二张图片的ID的链接。

这取决于第二张图片足够大以覆盖第一张图片。

#container {position:relative;}
#image1 {position:absolute;
  top:0;
  left:0;
  z-index:1;
}

#image2 {position:absolute;
  top:0;
  left:0;
  z-index:2;
  display:none;
}

#image2:target {
  display:inline-block;
}

<div id="container">
  <div id="image1">
    <a href="#image2"><img src="https://via.placeholder.com/150?text=Show" /></a>
  </div>
  <div id="image2">
    <a href="//www.google.com"><img src="https://via.placeholder.com/150?text=To Goole.." /></a>
  </div>
</div>

仅CSS-交换图片并添加链接

1 个答案: