即使使用-webkit-和-moz-前缀

Question

这可能有一个明显的答案，但我只是没有看到它。我更新了此代码，以更正top的错误article section h1值。我还为:hover添加了article section h1触发器。否则，这与我从webdesigner杂志上展示动画标题效果的代码相同，但在FF或Chrome中都没有发生任何事情。我将-webkit-和-moz-前缀添加到过渡样式中，但仍然没有。请告诉我我做错了什么。

＆＃13;

＆＃13;

    body,html {
	display:block;
	width: 100%;
	height: 100%;
	background: white;
	color:black;
	padding: 0;
	margin: 0;
	font-family: Helvetica, sans-serif;
}
nav {
	position:fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
	background: white;
}
article {
	position: relative;
	padding-top: 5em;
}
article section {
	position: absolute;
	opacity: 0;
	width: 100%;
} 
article section:target {
	left: 0;
	opacity: 1;
	z-index: 9999;
}
article section h1 {
	position: absolute;
	top: 0em;
	left: 0;
	font-size: 4em;
	width: 100%;
	color:black;
	
}
article section h1:hover {
	text-shadow: 0 998em 2 em #000;
	transition: text-shadow 1.5s;
	-webkit-transition: text-shadow 1.5s;
	-moz-transition:text-shadow 1.5s;
}
nav {
	display:block;
	width: 100%;
	padding: 2em;
	text-align: center;
}
nav a {
	color: black;
	text-decoration: none;
	padding: 1em 2em;
	margin-right: 1em;
}
nav > a:hover {
	border-bottom: .5em solid #c00;
}

＆＃13;

 <nav>
    		<a href="#first">Option</a>
    		<a href="#second">Option</a>
    		<a href="#third">Option</a>
    		
    	</nav>
    	
    	<article>
    		<section id="first">
    			<h1>First title</h1>
    		</section>
    		<section id="second">
    			<h1>Second title</h1>
    		</section>
    		<section id="third">
    			<h1>Third title</h1>
    		</section>
    	</article>

＆＃13;

＆＃13;

＆＃13;

fiddle

Answer 1

我不知道预期的结果是什么，但无论如何：top: -1000em;的规则中有article section h1，并且没有其他规则会改变这个位置。因此，这些h1元素将保持不可见（因为它们远离屏幕）。将其更改为top: 0em;作为开头，然后查找转换...