0

ユーザーが画像からホバーした後、画像を元のサイズに戻そうとしています。ここで何をすべきかわかりません。

私のcss

//doesn't work
.imgDiv img{

-webkit-transform:scale(1, 1);
-moz-transform:scale(1, 1);
-o-transform:scale(1, 1);
-ms-transform:scale(1, 1);
transform:scale(1, 1);

}


//enlarge the image but don't know how to shrink them back

.imgDiv:hover img{

-webkit-transform:scale(1.15, 1.15);
-moz-transform:scale(1.15, 1.15);
-o-transform:scale(1.15, 1.15);
-ms-transform:scale(1.15, 1.15);
transform:scale(1.15, 1.15);

}

html..。

<div class='imgDiv'>

     <img src='a.jpg' />
     <img src='b.jpg' />
     <img src='c.jpg' />
     <img src='d.jpg' />

</div>

助けてくれてありがとう....

4

3 に答える 3

1

transform元の宣言からすべてのプロパティを削除するだけです。画像はデフォルトでに拡大縮小されているため1、それを宣言する必要はありません。要素の:hover疑似クラスに設定したものはすべて、マウスを離すとデフォルトに戻ります。

これが例です。

最終的なCSSは次のとおりです。

.imgDiv:hover img{
    -webkit-transform:scale(1.15, 1.15);
    -moz-transform:scale(1.15, 1.15);
    -o-transform:scale(1.15, 1.15);
    -ms-transform:scale(1.15, 1.15);
    transform:scale(1.15, 1.15);
}

もちろん、これを各画像に適用しようとした場合でも、.imgDiv img宣言を削除してに変更.imgDiv:hover imgし.imgDiv img:hoverます。

これが実際の例です。

于 2012-08-09T00:30:12.430 に答える
0

:hoverあなたの画像に置くだけです

.imgDiv img:hover{
    -webkit-transform:scale(1.15, 1.15);
       -moz-transform:scale(1.15, 1.15);
        -ms-transform:scale(1.15, 1.15);
         -o-transform:scale(1.15, 1.15);
            transform:scale(1.15, 1.15);
}

デモ

于 2012-08-09T00:28:09.453 に答える
0

トランジションを追加すると、ホバーに素晴らしいトランジション効果が得られます。

.imgDiv img:hover{
    -webkit-transform:scale(1.15, 1.15);
    -moz-transform:scale(1.15, 1.15);
    -o-transform:scale(1.15, 1.15);
    -ms-transform:scale(1.15, 1.15);
    transform:scale(1.15, 1.15);
}

.imgDiv img {    
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
​
于 2012-08-09T07:40:44.983 に答える