因此，我想在彼此之间放置三个不同的div。顶部div是具有透明背景的文本（例如白色），中间div是仅具有背景颜色（例如蓝色）的空div，与第一个div的文本颜色不同，而底部div是是另一个空div，其背景颜色与顶部div文本颜色相同（在这种情况下为白色）。
我要执行此操作的原因是创建一个按钮，该按钮基本上看上去是空的（顶部和底部div的颜色是相同的），但是当鼠标悬停时，中间div应该以该不同的颜色向上滑动，这样我们就可以确定第一个div的文本和中间div的背景颜色。
整个过程将放在Bootstrap容器中（在示例中将进行介绍）。
HTML：
<div class="row">
<div class="col-lg-3">
<div id="topdiv">Button</div>
<div id="middlediv"></div>
<div id="bottomdiv"></div>
</div>
</div>
CSS：
#topdiv{
background-color:transparent;
color:white;
z-index:100;
}
#middlediv{
background-color:blue;
z-index:99;
}
#bottomdiv{
background-color:white;
z-index:98;
}
jQuery的：
$(document).ready(function(){
$('#middlediv').hide();
$('#topdiv').mouseenter(function()
$('#middlediv').slideDown();
)};
$('#topdiv').mouseleave(function()
$('#middlediv').slideUp();
)};
});
我已经尝试过使用绝对位置，但是问题是我无法将文本对齐到想要的位置（在这种情况下位于div的中间）。文字对齐：居中不起作用。
主要问题是CSS，因此我主要需要您的帮助。如果jQuery无法正常工作，我想我可以解决。
希望您能理解我的想法，并感谢您的帮助！
您甚至不需要背景div。
.button {
position: relative;
width: 200px;
height: 50px;
overflow: hidden;
border: 2px solid black;
border-radius: 10px;
}
.button div {
position: absolute;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
vertical-align: middle;
}
.topdiv {
top: 0;
left: 0;
color: transparent;
z-index: 3;
}
.bottomdiv {
top: 100%;
left: 0;
background: blue;
z-index: 2;
transition: top 1s;
}
.button:hover .bottomdiv {
top: 0;
}<div class="button">
<div class="topdiv">Button</div>
<div class="bottomdiv"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句