gpt4 book ai didi

html - CSS 过渡定位

转载 作者:行者123 更新时间:2023-11-28 15:42:23 26 4
gpt4 key购买 nike

我是网页设计新手。很新。我需要一些有关 -webkit-transitions 的帮助。有没有办法让我可以做到这一点,让女巫曾经转换过的盒子总是停留在其他盒子的顶部。类似于将鼠标悬停在左侧框上时发生的效果。

<body>
<p>Test</p>
<div class="container">
<div class="box">
<h2>headline</h2>
<p>test content</p>
</div>
<div class="box">
<h2>headline</h2>
<p>test content</p>
</div>
</div>
<p>Test</p>

http://jsfiddle.net/25z7qj5d/3/

最佳答案

这有点问题,因为元素的位置会移动您悬停在它们上,因此很难保持悬停。您选择的速度在这里有所帮助。

坦率地说,悬停可能更适合使用 JS/JQ 切换类,但实际的重新排序可以使用 flexbox 完成。

.container {
width: 75%;
margin: 10px auto;
border: 1px solid green;
display: flex;
flex-wrap: wrap;
}
.box {
order: 2;
border-radius: 25px;
display: inline-block;
width: 15%;
height: 20%;
margin: 1%;
color: aquamarine;
text-align: center;
background: black;
-webkit-transition: width 2s;
transition: width 2s;
}
.box:hover {
order: 1;
width: 100%;
height: 40%;
}
<div class="container">
<div class="box">
<h2>FIRST</h2>

<p>test content</p>
</div>
<div class="box">
<h2>SECOND</h2>

<p>test content</p>
</div>
<div class="box">
<h2>THIRD</h2>

<p>test content</p>
</div>
</div>

Codepen Demo

关于html - CSS 过渡定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32330782/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com