html - 为什么css3是:target not working?

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 制作这两个动画以保持一致。只是另一种选择...