Question

我用css创建了悬停过渡图像。但当我将鼠标悬停在第一张图像或secont图像上时，其他图像像素在瞬间发生变化。那是什么，它的解决方案是什么？

我已从codepen

创建了 DEMO

这是我的图片的过渡css：

.abo_im {
  float:left;
  width:170px;
  height:150px;
  overflow:hidden;
  -webkit-transition: all .3s ;
  -moz-transition: all .3s ;
   -ms-transition: all .3s ;
   -o-transition: all .3s ;
   transition: all .3s ;

}
    .abo_im img {
      width:100%; 
      -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;   
    }
    .abo_im:hover img {
      -webkit-transform:scale(1.25); /* Safari and Chrome */
        -moz-transform:scale(1.25); /* Firefox */
        -ms-transform:scale(1.25); /* IE 9 */
        -o-transform:scale(1.25); /* Opera */
         transform:scale(1.25);
    }

Answer 1

在backface-visibility上使用img，这样可以解决问题。

-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;

Demo Here

Answer 2

只需将-webkit-backface-visibility: hidden;添加到.abo_im img

即可

.abo_im img {
width: 100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-webkit-backface-visibility: hidden;
}

见here

过渡正在影响其他图片

2 个答案: