Question

我有一个div，我希望点击其他div幻灯片。我想用css3：target实现这个目标。

就像你可以在代码片段中看到的那样：hover工作。当悬停动画开始淡入某些信息时。当你点击图像时，我希望通过调用悬停时使用的相同动画，其他div在顶部淡入。

有人可以帮助让目标工作吗？

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);
});

我知道您希望通过以下方式实现此目标：但是如果您愿意，可以通过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>

为什么css3：目标不起作用？

2 个答案: