简体   繁体   English

CSS / JQuery悬停图标列表从左向右展开

[英]CSS / JQuery List of icons on hover expand left to right

I have a list which I wrap in a div and float it right: 我有一个列表,将其包装在div中,然后将其浮动:

I need to be able to make the li a expand from right to left like the images below: 我需要像下面的图片一样使li从右向左扩展:

在此处输入图片说明

So for the list id do this: 因此,对于列表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 // CSS

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

How to I get the list to expant on hover right to left like the image? 如何使列表像图像一样从右到左悬停显示?

use max-width to give animating effect 使用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> 

You should use transitions, here is a fiddle: Fiddle 您应该使用的过渡,这里是一个小提琴: 小提琴

  <div class="button"></div>
  <div class="list"></div>

<style type="text/css">
.button {position:relative; width: 40px; height: 40px; float: right; background-color: red; transition: margin-right 1s; z-index: 1000;}
.list {position:relative; width: 100px; height: 40px; float: right; margin-right: -100px; background-color: yellow; transition: margin-right 1s; z-index: 100;}

.button:hover + .list {margin-right: 0px;}
</style>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM