悬停时调整图像大小使其他图像移动

Posted 2023-03-05

【中文标题】悬停时调整图像大小使其他图像移动

【英文标题】：Resizing img when hovering makes other images move

【发布时间】：2012-03-29 05:13:54

【问题描述】：

我在一行中有 4 张图片作为链接，我在悬停时调整了它们的大小，但是当我悬停其中一张图片时，它会按照我的预期调整大小，但其他未悬停的图像会向下移动 50 像素。 如何避免其他图片向下移动？

我的代码是： html：

<a href=""><img src="cover (1).jpg" class="cover"><a>
<a href=""><img src="cover (2).jpg"class="cover"><a>
<a href=""><img src="cover (3).jpg"class="cover"><a>
<a href=""><img src="cover (4).jpg"class="cover"><a>

CSS：

img.cover
height:100px;
Width:100px;
padding-top:25px;

img.cover:hover 
height:150px; 
width:150px;
margin-top:auto;

【问题讨论】：

鼠标悬停在图片上时，您希望其他图片做什么？

【参考方案1】：

如果您的意思是希望其他图片保持在同一位置，您正在寻找absolute positioning。

或者如果您只希望所有四个都对齐顶部而不是底部，请将margin-top:auto 替换为vertical-align:top。

【讨论】：

vertical-align:top 完美运行！谢谢！

很高兴能提供帮助。顺便问一下，你的名字是从哪里来的？这听起来相当……国际化。

我是泰国人、格陵兰人和丹麦人 :)

【参考方案2】：

编辑：扩展答案with an example 以显示绝对定位所需的所有内容，因为李斯特先生不喜欢我的简短版本，只是指出需要采用绝对定位这一事实他们没有流动：

HTML

<a href="" class="cover"><img src="cover (1).jpg" /></a>
<a href="" class="cover"><img src="cover (2).jpg" /></a>
<a href="" class="cover"><img src="cover (3).jpg" /></a>
<a href="" class="cover"><img src="cover (4).jpg" /></a>

CSS

.cover 
    position: relative;
    display: inline-block;    
    height:100px;
    width:100px;
    padding-top:25px;    


.cover img 
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid blue;


.cover img:hover 
    height:150px;
    width:150px;

【讨论】：

你测试过吗？这本身是行不通的。只给图像一个绝对位置意味着as 内没有更多空间为它们保留，as 将折叠为零宽度。

@MrLister——扩展了信息。顺便说一句，+1 为您的vertical-align 答案。不错。

@MrLister——没关系，我可能应该投反对票，因为我没有更清楚地使用绝对定位来解决问题需要做什么。现在，如果您想从否定中提取我的新答案... :-)