Question

所以，我想在彼此上放三个不同的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不能正常工作，我想我可以处理它。

我希望您能理解我的想法并感谢您的帮助！

Answer 1

您应为三个div指定position: absolute，为其容器指定position: relative。

Answer 2

你甚至不需要背景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>

如何将两个div放在一起？

2 个答案: