javascript - 悬停时放大图像但不要放大容器

Question

当图像悬停发生时，我正在尝试找到一种不放大表格的方法。这是我的代码。谢谢

<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>

Answer 1

试试这个css 片段：

#thServer {
  width: 50px;   
  height: 50px;
  position: relative;    
}

#thServer img {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

Answer 2

很容易做到这一点

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>

然后使用 left 和 top 值添加更多样式以将图像定位在正确的位置。