javascript - CSS按钮动画不起作用

Question

我从 this tutorial 开始在我的页面上设置动画 CSS 按钮.该按钮出现在我的页面上，但没有动画。然而，当它在外面时 <div id="wrapper">翻转动画确实有效，但我无法将它放在页面上我想要的位置。我从 index.html 和 style.css 中包含了与按钮相关的代码，并突出显示了按钮的 <div>。在我的 index.html 中。如果您需要包装器或主程序或其他任何东西的 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>

样式.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;
}

Answer 1

这不是 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％；边距左:-half-width-of-p -tag) 或将整个 .downbutton 容器本身居中。