jquery - 悬停时的图像动画jquery

Question

好的，

当我将鼠标悬停在 <li> 上时，我希望如此包含图像的元素，图像会变大(就像谷歌图像缩略图中一样)

<div>
    <ul class="images">
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
    </ul>
</div>

问题是，如果我只对 li 进行动画处理，其他图片就会移动，设计就会被破坏。

这是我的jsfiddle如果需要的话...谢谢

Answer 1

您的li必须是相对定位的，并且其中包含绝对定位的元素。li 悬停状态将使其他元素展开，但由于它们是“position:absolute”，因此不会影响其他 li 定位。

喜欢(伪代码):

li{width:150px; height:100px; position:relative}
li span{width:150px; height:100px; position:absolute; top:0; left:0; display:block}
li:hover span{width:200px; height:150px; top:-25px; left:-25px}

您还可以通过 JavaScript 更改 img 的 src 属性，以在悬停时加载微小的缩略图和更大的详细图像。

如果需要动画，只需添加 jQuery Animate对此。

• Fiddle on pure css