【发布时间】：2013-10-17 21:55:22
【问题描述】：
有一个关于使用 :target-selector 进行转换的问题。 尝试用谷歌搜索并在互联网上搜索让过渡与我的代码一起工作的方法，但我只有动画可以工作（我不允许使用）。
我的 HTML 代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BluShop</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header id="header">
<h1>BluShop</h1>
</header>
<section id="leftContent">
<div id="pacificrimContent">
<h2>Pacific Rim</h2>
<img src="../bilder/pacificRim.jpg">
<p>blahblah</p>
</div>
<div id="startrekContent">
<h2>Star Trek</h2>
<img src="../bilder/starTrek.jpg">
<p>blahblah</p>
</div>
<div id="worldwarzContent">
<h2>World War Z</h2>
<img src="../bilder/worldWarZ.jpg">
<p>blahblah </p>
</div>
</section>
<aside id="rightContent">
<div id="pacificrimPoster">
<a href="#pacificrimContent"><img src="../bilder/pacificRim.jpg"></a>
</div>
<div id="startrekPoster">
<a href="#startrekContent"><img src="../bilder/starTrek.jpg"></a>
</div>
<div id="worldwarzPoster">
<a href="#worldwarzContent"><img src="../bilder/worldWarZ.jpg"></a>
</div>
</aside>
<footer id="footer">
</footer>
</div>
</body>
</html>
和 CSS 代码：
@charset "utf-8";
/* CSS Document */
body{
margin: 0;
}
#container{
width: 960px;
height: 600px;
margin: auto;
background-color: rgb(78, 80, 85);
border: solid 1px rgb(213, 214, 215);
}
#header{
height: 60px;
background-color: rgb(66, 69, 74);
margin-bottom: 10px;
}
#header h1{
float: left;
margin: 0px 10px 0px 10px;
color: rgb(14, 177, 238);
}
#leftContent{
float: left;
position: relative;
margin: 0px 10px 10px 10px;;
height: 460px;
width: 780px;
background-color: rgb(230, 231, 232);
}
#leftContent h2{
font-size: 20px;
margin: 10px 0px 0px 10px;
}
#leftContent img{
float: left;
margin: 0px 20px 10px 10px;
width: 310px;
height: 420px;
}
#leftContent p{
margin: -4px 20px 10px 0px;
}
#pacificrimContent, #startrekContent, #worldwarzContent{
display: none;
}
#rightContent{
float: right;
width: 140px;
height: 460px;
margin: 0px 10px 10px 10px;
background-color: rgb(230, 231, 232);
}
#rightContent img{
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 20px
}
#pacificrimContent:target{
display:block;
position: absolute;
}
#startrekContent:target{
display:block;
position: absolute;
}
#worldwarzContent:target{
display:block;
position: absolute;
}
#footer{
height: 60px;
margin: 0;
background-color: rgb(16, 163, 210);
clear: both;
}
使用 :target 时要显示的图像必须首先是不可见的，因此我一直在使用 display: none，在 #pacificrimContent 下等等。
所以我要注意的是，当我触发 #pacificrimContent 出现时，我想要一个过渡效果，如 f.ex。淡入淡出效果。我尝试了不同的方式：作为放置过渡：所有 2s 淡入；在显示屏下方：无，但我无法解决这个问题。
如果有人可以帮助我去她那里就好了。如果人们解释它，我也会很高兴，这样我就可以了解我实际在做什么，而不是使用 copy/pasye。
谢谢！
【问题讨论】：
-
使用
display属性总是会导致转换中断。 -
啊，我明白了。那么使用可见性属性是要走的路吗？
-
您可以尝试在开始时将目标框的高度设置为 0，然后将其转换为 100%，如 this。如果此解决方案适合您，我会将其添加为答案。
-
谢谢。这就像做梦一样。多亏了你，我还了解到，我不能将 display-property 与转换一起使用。所以你为我节省了一些时间。非常感谢！
标签： html css css-selectors css-transitions