如何使用css3創建懸停效果

Question

當用戶將鼠標懸停在我的圖像上之后，我正在嘗試將圖像轉換回原始大小。不確定在這里做什么。

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

謝謝您的幫助....

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

這是一個實際的例子。

Answer 2

只需將: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);
}

演示

Answer 3

添加過渡后，您會在懸停時獲得不錯的過渡效果：

.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;
}
​