悬停时放大图像，但不要'不要把容器放大

Enlarge Image when hover but don't make the container enlarged

本文关键字：放大 悬停 图像      更新时间：2023-09-26

当图像悬停时，我正试图找到一种不放大表格的方法。这是我的密码。感谢

<script language="javascript" type="text/javascript">
    //opacity: 0.5, 
    $(document).ready(function () {
        $("#thServer img").hover(function () {
            $(this).stop().animate({ width: 70, height: 70 }, 100);
        }, function () {
            $(this).stop().animate({ width: 50, height: 50 }, 100);
        });
    });
</script>
<table style="border-style: solid">
    <tr>
        <th id="thServer">
            <img src="NewVersion.png" width="50" height="50"></img>
        </th>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>

试试这个css片段：

#thServer {
  width: 50px;   
  height: 50px;
  position: relative;    
}
#thServer img {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

实现这个很容易

table {
height: 50px;
**table-layout: fixed;**
width: 250px;}  th {
**overflow: hidden;**
white-space: nowrap;}

然后通过jquery 使图像位置：绝对

<th id="thServer">
        <img src="NewVersion.png" **style="position:absolute;"** width="50" height="50"></img>
    </th>

然后添加更多带有左值和上值的样式，以将图像定位在正确的位置。

相关文章：