html - 在悬停时调整元素的大小以不移动其他元素

Question

I was trying to make this work but can't find a way. Here's the example I'm working on

HTML:

<ul>
<li><img></li>
<li><img></li>
</ul>

CSS

ul{position:relative;margin:0;padding:0;position:relative}
li{width:100px;height:100px;list-style-type:none;float:left;margin:2px;border: 1px solid #000}
img{}
li:hover{width:150px;height:150px;}

这是 JSFiddle: http://jsfiddle.net/qw2W4/2/

如何在不移动所有其他元素的情况下调整 li 元素的大小？

如果可能的话，我希望在不使用 JS 的情况下完成。

Answer 1

http://jsfiddle.net/qw2W4/4/ 检查第一个元素。 我插入了另一个元素，它具有 position: absolute 并在悬停时缩放。