javascript - ページ間隔に影響を与えずにホバー時に画像を変更/拡大

Question

現在、onmouseover と onmouseout を使用して、ホバー時に画像を交換しています。これはうまく機能していますが、このスクローラーの効果を追加したいと考えています。画像サイズの増加がコンテナやテーブルに影響を与えないようにするには？

いくつかの要件があります。ソリューションはIE7で動作する必要があり、ホバー時に別の大きな画像を表示する機能が必要です。

Answer 1

CSS3で拡大縮小できます。

変換の例を次に示します: scale - jsFiddle

そして、これが私の例で使用したコードです。

<div class="box"></div>

.box {
    width: 50px;
    height: 50px;
    background-color: green;
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
    -ms-transition: 0.1s ease-out;
}

.box:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
}