我正在使用transform:scale(); 在网站上.我希望有人能帮助我解决一个我无法通过网络搜索解决的问题.
这是我的代码:HTML:
<div class="hopp_circle_img">
<img src="..." alt="" />
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
.hopp_circle_img {
position: relative;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: 0;
}
.hopp_circle_img img {
-webkit-transition: transform 0.15s;
transition: transform 0.15s;
}
.hopp_circle_img img:hover {
display: block;
z-index: 100;
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
Run Code Online (Sandbox Code Playgroud)
这样做很好,但是当courser进入时,我被要求使效果不同,而不是当它移出时.例如,在鼠标输入时快速缩放,但在鼠标输出时速度较慢.在CSS3或Javascript中是否有任何解决方案?
谢谢rabox