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

これを達成するのは簡単です

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>

次に、左と上の値でさらにスタイルを追加して、画像を正しい位置に配置します。

Answer 2

このCSSスニペットで試してください：

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

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