我在this tutorial的页面上设置了动画CSS按钮。该按钮出现在我的页面上，但没有动画。但是，当它在<div id="wrapper">之外时，翻转动画确实有效，但是我无法在页面上找到我想要的位置。我已经在index.html和style.css中包含了与按钮相关的代码，并在index.html中突出显示了按钮的<div>。如果你需要CSS包装或主要或其他什么，让我知道，我会尝试挖掘它。
您可以在http://suchryan.com/gtd/#download查看我的问题的实时版本，以及我在http://suchryan.com/working/尝试实现的目标。
请让我知道我失踪了什么，我已经坚持了好几个小时了:(
的index.html
<!-- Wrapper-->
<div id="wrapper">
<!-- Nav -->
<nav id="nav">
<a href="#me" class="fa fa-info-circle active"><span>File Information</span></a>
<a href="#download" class="fa fa-download"><span>Download File</span></a>
<a href="http://suchryan.com/#work" class="fa fa-arrow-left"><span>Back to Portfolio</span></a>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Grab the Diamonds</h1>
<span class="byline">A simple <a href="http://minecraft.net">Minecraft</a> inspired 2D platform game.</span>
</header>
<a href="#download" class="jumplink pic">
<span class="jumplink arrow fa fa-chevron-right"><span>Go To Download</span></span>
<img src="images/me.jpg" alt="" />
</a>
</article>
<!-- Download -->
<article id="download" class="panel">
<header>
<h2>Download the Installer</h2>
</header>
<p>
Grab the Diamonds is a simple 2D platformer that I created in my first year of college. It was written in GLBasic
and is loosely based on the game Minecraft. It is currently unfinished, although I may choose to continue with
it someday. The game is fully functional, yet only the first level is able to be completed as the others are
unfinished. None of the images are compressed, so the file size is quite large (36Mb). A
VirusTotal Scan can be <a href="http://goo.gl/iaTdiY">found here</a> for anybody that is a little skeptical.
</p>
=============== FROM HERE ===============
<div class="downbutton" align="center">
<a href="files/GtD_Installer.exe">Download Me</a>
<p class="top">.exe Application</p>
<p class="bottom">36 MB</p>
</div>
=============== TO HERE ===============
</article>
</div>
的style.css
.downbutton
{
width: 200px;
margin: auto;
}
.downbutton a
{
display: block;
height: 50px;
width: 200px;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.downbutton a, .downbutton p
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.downbutton p
{
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;
/*TYPE*/
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
/*POSITION*/
position: absolute;
z-index: -1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
/*HOVER*/
.downbutton:hover .bottom
{
margin: -10px 0 0 10px;
}
.downbutton:hover .top
{
margin: -80px 0 0 10px;
line-height: 35px;
}
/*ACTIVE*/
.downbutton a:active
{
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.downbutton:active .bottom
{
margin: -20px 0 0 10px;
}
.downbutton:active .top
{
margin: -70px 0 0 10px;
}
答案 0 :(得分：2)
这不是JS，而是CSS问题：
/* First add the following rules to your .downbutton a style rules */
position: relative; /* so z-index is working */
z-index: 2; /* increase it to 'hide' the additional infos */
/* Second change .downbutton p z-index (currently -1) */
z-index: 1; /* to set them 'behind' the button but in front of bg */
现在你已经可以看到p元素，并且悬停将再次“工作”（它一直有效）但是p标签根本不可见。标签仍然处于错误的位置（在容器中左对齐，没有居中。您可以通过将两个p标签居中放在.downbutton中来固定（左：50％; margin-left：-half-width-of-p） -tag）或将整个.downbutton容器本身居中。
答案 1 :(得分：-1)
似乎正在运作HERE
Just copied your code to Jsfiddle, and voila its working.
你的错误页面似乎遗漏了这一点（虽然我仍在尝试解决问题......）。
.downbutton
{
width: 200px;
margin: auto;
}