请访问我的网站：
您将看到一个目录项表。将鼠标悬停在其中一张图片上。你应该看到图像放大。
您可能还会注意到图像有点闪烁。当您将鼠标悬停在缩略图的上部时会发生这种情况。
发生这种情况的原因是，正如您所注意到的，放大图像的顶部边缘位于缩略图的中间位置。这意味着当图像放大时，鼠标位于放大图像的正上方。这意味着只要您移动鼠标，它就会将其检测为 mouseout 事件，这会导致图像再次缩小。但这反过来又会触发放大，因为鼠标仍然悬停在缩略图上。这个结果是一个放大和缩小的循环，当看到非常快时，会给你闪烁。
所以我想知道是否有办法强制放大图像的顶部与缩略图相同。
悬停事件会导致 css 转换，其中被转换的类将图像的位置设置为绝对：
img {
transition: width 0;
&:hover {
position: absolute;
z-index: 100;
width: 300px;
border: 1px solid black;
box-shadow: 5px 5px 10px grey;
transition: width .2s linear;
}
}
我会尝试通过将其设置为 0 来调整放大图像的 top 属性，但是对于 position: absolute ，这只会导致图像位于屏幕的左上角。我不确定如何计算 CSS 中相对于其包含元素（角垫表中的 td）的位置，所以我对如何执行此操作有点不知所措。
任何帮助将非常感激。谢谢。
首先，为了position: absolute达到您想要的效果，您需要定位它可以关联的父级（任何不是position: static）。
这意味着position: relative对包含的设置<td> 应该有效。但可惜，事实并非如此。:(那是因为表格单元格上的相对位置是未定义的，大多数浏览器都不能很好地处理它。无赖。
所以，最好的办法是用一个<div>（或类似的东西） with position: relativeset包裹你的图像，如下例所示。
table {
border-collapse: collapse;
}
table th,
table td {
padding: 5px;
}
table td {
border-top: 1px solid;
}
div {
height: 100px;
position: relative;
width: 100px;
}
img {
border: 1px solid transparent;
height: auto;
position: absolute;
transition: width .2s linear;
width: 100px;
z-index: 100;
}
img:hover {
border-color: #000;
box-shadow: 5px 5px 10px grey;
width: 400px;
z-index: 110;
}
<table>
<tr>
<th>Name</th>
<th>Image</th>
<th>Description</th>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
</table>另一种解决方案可能是使用 CSS 转换 ( scale)，因为它们不会改变元素的文档流。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句