我正在尝试使用CSS转换制作一个<ul>幻灯片。
<ul>开始于高度:0;。悬停时,高度设置为height:auto;。然而,这导致它简单地出现,
如果我从高度做:40px;至高度:自动;,那么它将向上滑动到高度:0;,然后突然跳到正确的高度。
如果不使用JavaScript,我怎么能做到这一点?
#子0{高度:0;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent0:悬停#child0{高度:自动;}#孩子40{高度:40px;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent40:悬停#child40{高度:自动;}h1小时{字号:粗体;}两个CSS片段之间的唯一区别是一个高度为0,另一个高度是40。<小时><div id=“parent0”><h1>将我悬停(高度:0)</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><小时><div id=“parent40”><h1>将我悬停(高度:40)</h1><div id=“child40”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>
根据MDN Web Docs,CSS转换规范中故意排除了auto值,因此在网格和柔性布局中使用height:100%、top或flex属性,而不是height:auto。
展开/折叠覆盖
.grid容器{显示:栅格;位置:绝对;}.内容{背景:浅绿色;高度:0;溢出:隐藏;过渡:1s;}span:hover+.gridcontainer.content{高度:100%;}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p>
展开/折叠滑动覆盖
.grid容器{显示:栅格;位置:绝对;溢出:隐藏;指针事件:无;/*以实现与容器下方元素的交互*/}.内容{背景:浅绿色;指针事件:自动;位置:相对;顶部:-100%;过渡:1s;}span:hover+.gridcontainer.content{顶部:0;}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p>
在文档流中展开/折叠
html格式{显示:栅格;}正文{显示:柔性;弯曲方向:柱;}.内容{背景:浅绿色;弹性基础:0;溢出:隐藏;过渡:1s;}span:悬停+内容{挠曲:1;}<span>悬停在我上方</span><div class=“content”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</分区><p>其余页面内容</p>