Question

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

如何将文字放在下（在z轴上）一个用元素制作的按钮，这样当我将鼠标悬停在按钮上时它消失了，并在下显示文字？

我尝试过使用定位和定位：绝对使其成为两个文本都可以在一个地方，但它似乎无法正常工作

我的按钮：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的位置设置为绝对，将pricebar的位置设置为relative，给出看到并显示高度和宽度，将.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

中看到它

悬停淡出按钮下的文本

3 个答案: