可以利用 CSS 中的 transition 属性来解决这个问题。具体来说,如果我们要实现不同高度的 div 元素在 hover 时有相同的 transition 效果,可以把 transition 属性设置在 div 的容器元素上,并把其高度设置为最大高度。下面是示例代码:
HTML:
Box 1
Box 2
CSS:
.container {
height: 100px;
transition: height 0.5s ease;
overflow: hidden;
}
.box1, .box2 {
height: 50px;
background-color: #ccc;
transition: height 0.5s ease;
}
.box1:hover, .box2:hover {
height: 80px;
}
在这个例子中,我们设置了一个容器元素 container,把需要 hover 变化的 div(box1 和 box2)放到 container 中。container 的高度就是我们要做 transition 的基准高度。box1 和 box2 的高度都小于 container,同时它们各自也有自己的 transition 效果。在 hover 时,我们改变 box1 和 box2 的高度,同时 container 的高度也会跟着改变,实现了不同高度的 div 变化速度相同的效果。
下一篇:不同div之间出现随机空白空间