gpt4 book ai didi

jquery - 悬停图标的 CSS/JQuery 列表从左到右展开

转载 作者:太空宇宙 更新时间:2023-11-04 02:59:01 27 4
gpt4 key购买 nike

我有一个列表,我将其包装在一个 div 中并使其正确 float :

我需要能够使 li 像下图一样从右向左展开:

enter image description here

因此对于列表 id,请执行以下操作:

<div id="menu-wrapper">
<ul>
<li><a href=""><img src="btn1.gif" alt="" /></a></li>
<li><a href=""><img src="btn2.gif" alt="" /></a></li>
</ul>
</div>

//CSS

#menu-wrapper {float:right;width:40px;}

如何让列表在鼠标悬停时像图片一样从右向左扩展?

最佳答案

使用max-width实现动画效果

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url('http://placeimg.com/640/480/nature');
background-size: cover;
}
#menu-wrapper {
text-align: right;
}
.nav {
list-style: none;
display: inline-block;
margin: 0 auto;
}
.cell {
float: right;
clear: both;
background: lightgrey;
margin: 5px 0;
padding: 10px 15px;
}
.cell span {
float: left;
max-width: 0px;
overflow: hidden;
transition: 1s linear;
}
.cell:hover span {
max-width: 100px;
}
<div id="menu-wrapper">
<ul class="nav">
<li class="cell">
<img src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-18-32.png" /><span>expanded</span>
</li>
<li class="cell">
<img src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-18-32.png" /><span>expanded</span>
</li>
<li class="cell">
<img src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-18-32.png" /><span>expanded</span>
</li>
</ul>
</div>

关于jquery - 悬停图标的 CSS/JQuery 列表从左到右展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31638334/

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