Question

我得到了这段代码：

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background: black;
    height: 50px;
    width: 50px;
    float: left;
    transition: height 0.3s, background 0.5s;
}
div:hover {
	margin-top: 0;
	height: 450px;
    background: white;
}
</style>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>

当你将鼠标悬停在其中一个<div>上时，它的高度会发生变化。有没有办法让高度上升而不是下降？（<div>从底部开始）。感谢!!!

Answer 1

CSS3 flexbox正是您所需要的。

您的HTML：

  <div class="cont">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

然后你的造型：

.cont{
   display:flex;
   align-items:flex-end;
   height:500px;
}
.item {
   background: black;
   height: 50px;
   width: 50px;
   transition: height 0.3s, background 0.5s;
}
.item:hover {
  height: 450px;
  background: white;
}

您可以在此处看到它：https://jsfiddle.net/kylemartin/92m870dx/

flexbox的精彩参考可在此处找到：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使用flexbox，您可以强制元素位于父<div>的底部（因此为flex-end），然后会自动使<div>向上弹出在悬停。（flexbox非常漂亮）

使CSS高度上升而不是下降

1 个答案: