前段时间需要做到一个很普通的功能,即鼠标指向图片,图片直接放大,本来想要用js事件管理监听鼠标移动时事件,在里面写放大缩小代码,突然发觉有些麻烦,于是在网上寻找各种资料,发现css3有个特性,:hover 选择器,这个选择器,用于
选择鼠标指针浮动在其上的元素,并设置其样式。使用改选择器,直接获取了当前鼠标所指向的图片之后,我们直接编写放大图片的样式即可。
img:hover {
transform: scale(3);
}
这样我们就实现了简单的鼠标指向即放大代码,鼠标离开,就恢复原样的功能。
同时为了有一个简单的放大动画,我们再在该img中增加一个transition属性,该属性是用来设置过渡效果的,我们将第一个参数设置为all,即针对所有属性全部生效,过渡时间为0.6秒钟。cursor属性用来决定指针样式,这里pointer属性是指一个手指指针形状的图标。
img {
cursor: pointer;
transition: all 0.6s;
}