CSS / JQuery悬停时的图标列表从左到右展开 [英] CSS / JQuery List of icons on hover expand left to right
本文介绍了CSS / JQuery悬停时的图标列表从左到右展开的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个列表,我包装在一个div和浮动正确:
I have a list which I wrap in a div and float it right:
我需要能够使li从右到左扩展像图片如下:
I need to be able to make the li a expand from right to left like the images below:
因此,对于列表ID执行此操作:
So for the list id do this:
<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>
这篇关于CSS / JQuery悬停时的图标列表从左到右展开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文