4

基本的に、一連の画像を一列に並べるために私がやろうとしていることは、それらの1つにカーソルを合わせるたびに、その画像が拡大され、赤い境界線が表示されるはずです。

これにはCSSトランジションを使用しています。

現在の私の問題は、画像にカーソルを合わせると、周囲のすべての画像が押し下げられ、少し横に移動することです。

私が気づいたことの 1 つは、境界遷移を削除すると、効果が完全に機能することです。

html 部分は非常に単純です。

<div id="Menu">
    <img src="img1" alt="" /> <img src="img2" alt="" /> <img src="img3" alt="" /> <img src="img4" alt="" /> <img src="img5" alt="" /> <img src="img6" alt="" /> <img src="img7" alt="" />
</div>

CSSに関しては：

#Menu {
    text-align:center;
    margin-top:20px;
}
#Menu img {
    position:relative;
    display:inline;
    border:none;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    z-index:1;
    transition:transform .5s, border .5s;
    -webkit-transition:-webkit-transform .5s, border .5s;
    -moz-transition:-moz-transform .5s, border .5s;
}
#Menu img:hover {
    position:relative;
    display:inline;
    border: 3px #C00 solid;
    border-radius: 2px;
    transform:scale(1);
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1);
    z-index:10;
    transition:transform .5s, border .5s;
    -webkit-transition:-webkit-transform .5s, border .5s;
    -moz-transition:-moz-transform .5s, border .5s;
}

何が問題で、どうすれば修正できますか?

JsFiddle の例を次に示します。

4

3 に答える 3

3

追加する必要があります

#Menu img {
   border: 3px solid transparent;
}

説明：

CSSボックスモデルアーキテクチャについて学ぶなら

ここに画像の説明を入力

境界線は要素の内部ではなく要素の周囲のスペースを占有するため、ホバー時に境界線を使用すると、実際には要素の周囲のスペースを占有し、他の要素を押しのけます。したがって、それを防ぐために、境界線を使用してその場所を偽装します。透明感のある色で。

必要に応じて、新しい CSS3 プロパティを使用することもできます。box-sizing: border-box

完全クロスブラウザ

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

これは何をしますか？

transparent境界線、パディングなどはボックスの外側ではなく内側でカウントされるため、境界線が必要ない場合はこれらのプロパティを使用することもできます

于 2013-05-15T09:45:05.913 に答える
2

シンプルな境界線を透明にする

#Menu img {
border: 3px solid transparent;
}

http://jsfiddle.net/N9Zdq/2/

于 2013-05-15T09:38:17.823 に答える
1

フィドル

ここで、1 にスケーリングしていた fiddle を見てください。彼はすでにそうでした。1.3に変更しました:)

于 2013-05-15T09:42:30.580 に答える