css - 悬停时如何更改图标列表的对齐方式

Question

我有一些问题对齐图标列表。

从下图中可以看出，有一个图标列表。悬停时，当前图标会自行放大。

我想要做的是，改变当前图标放大的方向。我希望列表与图片右侧显示的方式对齐。

这是代码：

HTML code:
<div class="bar">
  <li>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
    <a href=""><img src="..." /></a>
  </li>
</div>


CSS code:
.bar {
    position: absolute;
    left: 5px;
    width: 35px;
    height: auto
    }

.bar li a img {
    position: relative;
    height: 30px;
    width: 30px;
    padding-top: 4px;
    padding-bottom: 4px
    }

.bar li a:hover img {
    position: relative;
    height: 50px;
    width: 50px
    }

Answer 1

bar li a img {
    float: right;
}

应该做的伎俩。你可以为你的问题创建一个 jsFiddle 吗？

Answer 2

这是你想要的演示

您需要float:right用于 img

.bar li a img {
    float: right;
}

并增加 div 的宽度

.bar {
    width: 50px;
}

Answer 3

添加：

.bar li a img { 
    right: -20px;
}  
.bar li a:hover img { 
    right: 0;
}