小编rab*_*x66的帖子

变换:scale(n); - 在mousein上比在mouseout上有所不同

我正在使用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

javascript css transform css3

3
推荐指数
1
解决办法
62
查看次数

标签 统计

css ×1

css3 ×1

javascript ×1

transform ×1