如何使用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;
}
​