Html 仅在css中单击其他图像/项目时隐藏图像？

我需要做到这一点，并且在不使用jQuery的情况下做到这一点，我看到了一个工作示例，但是当我编写自己的代码时，它无法按照我的要求隐藏图像。 下面是.css中的一行，当我单击另一个图像时，它可以帮助我隐藏图像：

    /*Selected image display*/
    .image-gallery .big-image img:target{display:block;}
    /*on select image dusplay none the default image*/
    .image-gallery .big-image img:target ~ img#default{display:none;}
    /*Shoe Default Image in first load*/
    .image-gallery .big-image img#default{display:block;}

以下是css应该触发的代码部分：

    <div id="image-wrap">
     <div class="image-gallery">
      <div class="big-image">           
        <a href="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG"><img style="max-height: 400px" id="merge" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /></a>
        <a href="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc"><img style="max-height: 400px" id="fullbody" src="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc" /></a>
        <a href="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc"><img style="max-height: 400px" id="closeup" src="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc" /></a>
        <img style="max-height: 400px" id="default" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" />
      </div>
 <ul>
<li>
  <a href="#merge"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /></a></li>
<li>
  <a href="#fullbody"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc" /></a>
</li>
<li>
   <a href="#closeup"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc" /></a>
</li>



  </div>

 </div>  

---

这里是jsfiddle中正在进行的工作的完整示例，这里是CSS工作代码。现在在您的代码中，您包含的所有

img

标记都应该关闭并显示，其中也包括thumb版本

所以我在这里加了一个更具体的例子

检查

/*Selected image display*/
.image-gallery .big-image a:target img{display:block;}
/*on select image dusplay none the default image*/
.image-gallery .big-image a:target ~ img#default{display:none; width:1px;}
/*Shoe Default Image in first load*/
.image-gallery .big-image img#default{display:block;}

---

您需要将A标记作为目标，而不是IMG标记，以使您的编码能够按照您的要求工作

CSS代码示例：

/*Selected image display*/
.image-gallery .big-image a:target img{display:block;}
/*on select image dusplay none the default image*/
.image-gallery .big-image a:target ~ img#default{display:none; width:1px;}
/*Shoe Default Image in first load*/
.image-gallery .big-image img#default{display:block;}

更新小提琴：

---

编辑：确保您也更新了HTML结构，只需将大图像的ID属性移动到父标记即可。您可以在上面指定的fiddle中检查更新的HTML和CSS，如果您需要任何澄清，请告诉我。

我发现原始代码工作正常，但默认图像不会消失

将默认图像放在底部并添加overflow:hidden to.big image修复了这一问题，但是由于某种原因，我让默认图像显示在页面下方更远的位置（部分图像丢失）。 I机顶盒：-100px；这使它回到了应该的位置，但现在默认图像的顶部出现在我的图库中！ 所以，再多做一步，给这个类所有其他的图片。mainpic

 .mainpic {position: relative; z-index: 10;}

我给了类默认值。defaultpic

 .defaultpic  {position: relative; z-index: 5;}

z索引意味着.mainpic将始终显示在.defaultpic前面

 .defaultpic  {position: relative; z-index: 5;}

---

有点乱，但它的工作

看来你把JSFIDLE中的代码搞糟了。。CSS应用于HTML区域。是的，我看到了，我刚刚编辑了链接，现在应该是正确的。您需要在添加图像的位置添加更多的特殊性。如果您看到JSFIDLE，您将看到我尝试仅使用.CSS创建图像库。第一次打开页面后，我需要一个默认显示的图像，但当我点击任何其他图像（大显示图像下较小的图像）时，它也应该消失。你能检查我更新的更新演示吗。现在的问题是，第一次加载站点时没有显示图像，正如你所看到的，在你点击thumb版本之前，只有空白，我也设法让它看起来像这样，很接近，但这不是我想要它做的。这太令人沮丧了，我知道用jquery可以很容易地完成，但我不被允许这样做，因为客户要求如此。。。无论如何，我很感谢你的帮助：）是的，你的真的很有效，你知道如何删除现在出现在图像周围的蓝色边框吗？编辑：实际上不需要，我用了

a:focus{outline color:#fff；}

现在它不见了：）谢谢！它成功了，我意识到错误在我这边！