为什么CSS3：target无法正常工作？

Question

I have a div and I want that on click an other div slides in. I want to achieve this with css3 :target.

Like you can see in the code snippet the :hover works. When hovered an animation start to fade some info in. When you click on the image I want that an other div fades in on the top by calling the same animations as used on hover.

Can somebody help with getting the :target working?

 body{ margin: 0px; } .image{ position: relative; width:300px; height:auto; } .image img{ width:100%; } .download{ position: absolute; top:0px; left:0px; height:80%; width:100%; background-color: gray; display:none; } .info{ position: absolute; bottom:0px; left:0px; height:20%; width:100%; background-color: green; opacity: 0; } .info p{ padding: 5px; margin: 0px; } .image:hover .info{ -webkit-animation: show 0.5s; /* Chrome, Safari, Opera */ animation: show 0.5s; opacity: 1; } .image:target .download{ -webkit-animation: show 0.5s; /* Chrome, Safari, Opera */ animation: show 0.5s; opacity: 1; } /* Chrome, Safari, Opera */ @-webkit-keyframes show { from {opacity: 0;} to {opacity: 1;} } /* Standard syntax */ @keyframes show { from {opacity: 0;} to {opacity: 1;} } 

 <div class="image"><!-- I detect everything on this div--> <img src="http://3.bp.blogspot.com/-gaBTIWFTWOo/UTeneLuwWyI/AAAAAAAABJE/E1GQBY4TJ8k/s1600/post-apocalypse-new-york.jpg"> <div class="download"><!-- this div should fade in on click (:target)--> download </div> <div class="info"> <!-- this div should fade in on hover--> <p>Image 1</p> </div> </div> 

Answer 1

This can be achieved via jquery: http://jsfiddle.net/swm53ran/13/

$('.image').on('click', function(){
    $(this).find('.download').fadeIn(500);
});

i know you want to achieve this with :target, but you can do both animations through jquery to keep consistent if you would like. just another option...

Answer 2

i think i got it the way you wanted with css:

added anchor tag surrounding image, added id #dl to download div...heres the fiddle http://jsfiddle.net/swm53ran/14/

:target {
    display:block;
    -webkit-animation: show 0.5s; /* Chrome, Safari, Opera*/
    animation: show 0.5s;
    opacity: 1;
} 

<div class="image"><!-- I detect everything on this div-->
    <a href="#dl">
    <img src="http://3.bp.blogspot.com/-gaBTIWFTWOo/UTeneLuwWyI/AAAAAAAABJE/E1GQBY4TJ8k/s1600/post-apocalypse-new-york.jpg"/>
    <div class="download" id="dl"><!-- this div should fade in on click (:target)-->
        download
    </div>

    <div class="info"> <!-- this div should fade in on hover-->
        <p>Image 1</p>
    </div>
    </a>
</div>