Question

如何使用jQuery在鼠标悬停时使图像的当前大小增加到120％？此外，当鼠标离开图像时，它应该恢复到原始大小。

$("img").mouseover(function (){
              ???
});

Answer 1

div{width:50%;margin:30px auto;height:300px;transition:1s;}
div:hover{transform:scale(1.2);}

http://codepen.io/damianocel/pen/Bovvjg

这就是你所需要的，没有必要为此使用jQuery，它需要更多的代码，vanilla JS也有太多的代码以及这种效果，你需要mouseover和mouseout事件以及添加/删除类。如果您想在JS或Jquery中使用它，请告诉我，我会将其添加到那里的代码中。

Answer 2

如上所述，你不需要jQuery。你可以用纯CSS来处理它。但我为你写了一个jQuery示例：

$(function(){
    $("img").hover(function(){
        $(this).css({
            "transform" : "scale(1.2)",
            "transition" : "1s"
        })}, function(){
            $(this).css({
            "transform" : "scale(1.0)",
            "transition" : "0.5s"
        });
    });
});

＆＃13;

$(function(){
    $("img").hover(function(){
        $(this).css({
            "transform" : "scale(1.2)",
            "transition" : "1s"
        })}, function(){
         	$(this).css({
            "transform" : "scale(1.0)",
            "transition" : "0.5s"
		});
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<img src="http://orig11.deviantart.net/ad48/f/2012/198/1/4/above_the_clouds_by_bluesixtynine-d57jb7b.jpg" width="50%" />

＆＃13;

鼠标上的图像增长

2 个答案: