JS入门三部曲第二部：CSS助力坤坤变大揭秘！

图片的位置搞的差不多了之后再来完善一下。你看这个Demo里面把鼠标挪到图片这里之后有没有发现什么变化？鼠标挪到图片这里，鼠标从箭头变成了一个手指，这是第一个。鼠标悬浮到图片上的时候图片是会放大的，所以接下来在图片上加上这两个效果。

·第一个效果也就是鼠标挪过来之后从箭头变成手指。这个怎么搞？其实很简单，有个CSS的属性也叫pointer，这个是光标的意思。如果要让它变成手指就是设置成pointer，然后保存，把鼠标挪过来，挪到图片范围里面去就变成手指了，出来就变成箭头了。

如果想换成别的也可以，比如crosshair，变成十字架了，换成pointer，第一个效果已经实现了。

·第二个效果就是挪到图片上之后会放大。这个怎么搞？其实也简单，可以再加一个CSS选择器。首先针对的是这些image元素，所以image要处理的是当鼠标悬浮到图片上的时候是什么效果，所以后面加个冒号，再加上一个hover大括号。

hover是什么意思？就是悬停的意思，也就是这里面的一些设置只会在什么时候起效？就是当鼠标悬停到图片上的时候可以实验一下看起不起效果。比如当鼠标悬停到图片的时候让图片的边框显示出来，那就是border，width，3Pixel，border style，solid，实实线。它的颜色border，color，比如白色。

把鼠标挪过来，这里的设置是不是只有在我这个鼠标，悬停到了某张图片上的时候才会起效果。但是需要的效果不是把边框显示出来，是希望坤坤能够变大，所以可以搞一个transform，这个是几何变换的意思。

想让坤坤变大肯定是缩放，这里有个scale是缩放，点一下，这里就可以设置坤坤到底要缩放成多大。这里可以填一个系数，比如填个1.1就相当于是会比原来大1.1倍，填个0.9就会比之前缩小10%。

这里来试一下，比如1.4，保存好移过来，是不是变大了？但是变大不像这边这么丝滑，像是有一个过渡图动画一样。这个怎么搞？也简单，再加一个设置transition，这个就是变化的意思。

后面可以加上一个时间，也就是当鼠标挪过来之后不是会变大吗？从原始大小变成这么大，这个过程需要多长时间？这个时间就可以在这里设置，比如搞个一秒钟，就1S好保存，挪过来是不是一秒钟的样子？如果觉得时间太长了，可以再缩短，比如0.3，快一点了。