悬停淡出按钮下的文本

Question

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

如何将文本 置于（在 z 轴上）一个由 a 元素制成的按钮，以便当我将鼠标悬停在按钮上时 它消失并显示文本under？

我尝试使用定位到和位置：绝对来使两个文本都可以在一个位置，但它似乎不起作用

我的按钮：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;

}

Answer 2

您总是可以尝试使用 jQuery 来完成此操作。可能有更简单的方法，但我目前的注意力集中在 jQuery 上。有一个类允许您添加或删除特定的东西。我们来看看用这个添加的jQuery。

jQuery:

$('a').hover(
    function() {
        var $this = $(this); // caching $(this)
        $this.data('initialText', $this.text());
        $this.text("I'm replaced!");
    },
    function() {
        var $this = $(this); // caching $(this)
        $this.text($this.data('initialText'));
    }
);

编辑：我将类的添加/删除替换为使用将最初拥有的数据缓存到变量中的方式，当您将鼠标悬停在变量上时，它实际上会更改为您放入 jQuery 函数内部的数据，并且你悬停在外面，它会变回来。老实说，我不能为此归功于它，因为它最初是在这个Stack question 中找到的，这意味着你应该直接投票给那个答案。但这应该适用于您想要做的事情。

JSFIDDLE

Answer 3

如果您想使用纯 css 来实现，则需要进行一些更改。摆脱行高，将 .see 和 .show 上的位置设置为绝对，将价格栏的位置设置为相对，给 see 并显示高度和宽度，将 .show 的内容放在 html 中的 .see 元素上方，并用负边距将它们排列起来。

#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
position:relative;
}
#pricebar .see {
color:#fff;
font-size:50px;

margin-left:-15%;    
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:absolute;
height:60px;
width:234px;
top:60px;
}
#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;
background-color:#000;
height:60px;
top:60px;
margin-left:-40px;
position:absolute;
}

你可以在this fiddle看到它