如何使用CSS3

Question

我想用戶將鼠標懸停後改變我像回到原來的大小了我image..Not肯定在這裏做什麼來創造出懸停效果..

我的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僞類中設置的任何內容都會恢復爲默認值。

Here就是一個例子。

下面是最終的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。

Here是一個在行動中的例子。

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); 
} 

DEMO

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