好的,
当我将鼠标悬停在 <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如果需要的话...谢谢
最佳答案
您的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对此。
关于jquery - 悬停时的图像动画jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16719135/