Hide an Image when another Image/Item is clicked u

问题:

I need to make this happen, and to make it without using jQuery, I saw a working example, but when I coded my own it couldn't hide the image as I wanted. Here is the line from .css that is supposed to help me hide an image when I click on another one:

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

Here is the part of my code that css should trigger:

    <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>  

And here is the full example of the work in progress in jsfiddle http://jsfiddle.net/sq72x/

回答1:

Here is the CSS working code.Where I've added a tag. Right now in your code you included all img tag should closed and appear which include the thumb version as well.

So I add a more Specificity here.

Check the 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;}

回答2:

You need to target the A tag instead of IMG tag to make your coding working as per your requirements.

Sample CSS Code:

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

Updated fiddle: http://jsfiddle.net/sq72x/1/

Edit: Make sure you update the HTML structure also, just need to move the ID attributes of big images to parent to A tags. You can check the updated HTML and CSS in the above specified fiddle and let me know if you need any clarification.

回答3:

I found the original code worked, but the default image wouldn't disappear.

Putting the default image at the bottom and adding overflow: hidden to .big-image fixed that, however I then, for some reason, had the default image showing much further down the page (with part of it missing). I set top: -100px; which put it back where it should be, but now the top of the default image appeared in my gallery! So, one more step, gave all other images the class .mainpic

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

I gave the default the class .defaultpic

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

The z-index means that .mainpic will always show in front of .defaultpic

A bit messy but it works!