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

Question

我有一个div，我希望单击另一个div使其滑入。我想使用css3：target实现此目的。

就像您在代码段中看到的那样：：hover起作用了。 悬停时，动画开始淡入一些信息。当您单击图像时，我希望另一个div通过调用与悬停时使用的相同动画在顶部淡入。

有人可以帮助：target工作吗？

 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

这可以通过jquery实现： http : //jsfiddle.net/swm53ran/13/

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

我知道你想用：target来实现这一点，但是你可以通过jquery来做两个动画来保持一致。 只是另一种选择...

Answer 2

我想我以您想要的CSS方式实现了它：

添加了周围图像的锚标签，添加了ID #dl以下载div ...此处是小提琴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>