Question

我需要实现这一点，并且在不使用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 http://jsfiddle.net/sq72x/

中正在进行的工作的完整示例

Answer 1

这是CSS工作代码。我添加了a标记。现在，您的代码中包含了所有img标记应该已关闭并显示包含缩略图版本的标记。

所以我在这里添加了更多特异性。

检查 DEMO 。

/*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;}

Answer 2

您需要定位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;}

更新了小提琴：http://jsfiddle.net/sq72x/1/

编辑：确保您也更新HTML结构，只需将大图片的ID属性移动到A标签的父级即可。您可以在上面指定的小提琴中查看更新的HTML和CSS，如果您需要任何说明，请告诉我。

Answer 3

我发现原始代码有效，但默认图片不会消失。

将默认图像放在底部并添加overflow：hidden到.big-image修复了，但是由于某种原因，我的默认图像显示在页面下方（部分缺失）。我设置顶部：-100px;把它放回应该的位置，但现在默认图像的顶部出现在我的画廊中！所以，还有一步，给所有其他图像一个类.mainpic

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

我给了默认类.defaultpic

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

z-index意味着.mainpic将始终显示在.defaultpic

之前

有点乱，但它有效！

仅使用css单击另一个图像/项目时隐藏图像？

3 个答案: