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

我在对齐图标列表时遇到一些问题

正如你可以从下面的图片看到的，有一个图标列表。悬停时，当前图标会自行放大

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

代码如下：

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
    }

HTML代码：


CSS代码：
.酒吧{
位置：绝对位置；
左：5px；
宽度：35px；
高度：自动
}
巴利先生{
位置：相对位置；
高度：30px；
宽度：30px；
垫面：4px；
垫底：4件
}
.bar li a:悬停图像{
位置：相对位置；
高度：50px；
宽度：50像素
}

---

我们应该做到这一点。你能解决你的问题吗？

这是你想要的

您需要为img使用

float:right

.bar li a img {
    float: right;
}

增加div的宽度

.bar {
    width: 50px;
}

:

---

哦，就是这样！我自己也测试过。它运行良好。谢谢！嘿@Alfo，你的建议是正确的。它在我的电脑上运行良好。说到JSFIDLE，很抱歉现在不熟悉它。。。

.bar {
    width: 50px;
}

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