html - 悬停淡入淡出按钮下的文本

Question

更新:我希望文本显示在按钮下方，因此当它消失时，它会显示在按钮所在的位置。

我如何将文本放在 下方(在 z 轴中)用 a 元素制作的按钮，以便当我将鼠标悬停在按钮上时 它逐渐消失并显示 under?

的文字

我试过使用定位到和position:absolute来使两个文本都可以在一个地方，但它似乎行不通

我的按钮:http://jsfiddle.net/27bCK/

<div id="pricebar">
 <a class="see" href="#">PRICING</a>
 </div>


#pricebar {
    width:100%;
    height:175px;
    background-color:#EAE5E5;
    text-align:center;
}
#pricebar .see {
    color:#fff;
    font-size:50px;
    line-height:175px;
    background-color:#2ecc71;
    border:5px solid #2ecc71;
    border-radius:5px;
    border-left:17px solid #2ecc71;
    border-right:17px solid #2ecc71;
    transition-duration: .3s;
    transition-property: background-color, border, border-left, border-right, opacity;
}
#pricebar .see:hover {
    opacity:0;
    background-color:#27ae60;
    border:5px solid #27ae60;
    border-left:17px solid #27ae60;
    border-right:17px solid #27ae60;
}
#pricebar .show {
    color:#fff;
    font-size:50px;
    line-height:175px;
    background-color:#000;
    margin-right:20px;
}

Answer 1

试试这个:

<div id="pricebar">
 <a class="see" href="#">PRICING</a>
 <div id="hidden">hidden text</div>
</div>

CSS:

#hidden{
text-align:center;
position:relative;
bottom:100px;
z-index:0;
border:0px solid red;
}


#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
    z-index:1;

}

#pricebar .see {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#2ecc71;
border:5px solid #2ecc71;
border-radius:5px;
border-left:17px solid #2ecc71;
border-right:17px solid #2ecc71;
transition-duration: .3s;
    transition-property: background-color, border, border-left, border-right, opacity;
    position:relative;
    z-index:3;

}

#pricebar .see:hover {
opacity:0;
background-color:#27ae60;
border:5px solid #27ae60;
border-left:17px solid #27ae60;
border-right:17px solid #27ae60;

}
#pricebar .show {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#000;
margin-right:20px;

}