Question

我试图在用户将鼠标悬停在我的图片后将图像转换回原始尺寸。不知道该怎么做..

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

如何使用css3创建悬停效果

3 个答案: