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

添加一个过渡，你会在悬停时获得一个很好的过渡效果：

.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 回答
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 回答