鼠标经过图片放大，离开变回原形，在谷歌浏览器里面显示异常_html/css_WEB-ITnose

图片是放在easyui datagrid列里面的，我写的是当鼠标经过图片放大离开变回原形

代码是这样的:

鼠标经过
a:hover img[class=imgView]{
position:absolute;
     -webkit-transform: scale(5);
     -ms-transform: scale(5);  
     transform: scale(5);
     transition: all 1s ease 0s;
     -webkit-transform: scale(5);
     -ms-transform: scale(5);  
     transform: scale(5);
     -webkit-transform: all 1s ease 0s;
     -ms-transform: all 1s ease 0s;   
      transform: all 1s ease 0s;
     z-index:10;
}
.imgView{
height:40px;
width:53px;
padding:2px;
}
在谷歌浏览器里面，鼠标经过时有时会一直闪有时又显示正常，大家知道是怎么回事吗

回复讨论(解决方案)

我最近也遇到过这个问题，我是通过改变文档结果来解决的。但这个问题的原理和出现的原因我不是太明白，我给你说下我的总结吧：
1.在css里面把过度效果删除，就不会出现闪烁的状况；
2.一个页面有多个这种过度效果，第一个过度效果没问题，后面的过度效果都会出现闪烁效果；
3.F12检查在过度的时候，闪烁的那个元素css样式并没有改变。
（ps：这是我出现的问题）
所以根据上面的情况我就觉得是文档结构出问题了，闪烁的元素可能被覆盖了，所以我就改了文档结构。

感觉你的问题和我挺像的，这个挺麻烦的，好好检查一下吧。

f12怎么检查过度效果啊，是这样改吗
a:hover img[class=imgView]{
     position:absolute;
     transform: scale(5);
     transition: all 1s ease 0s;
     z-index:10;
}
还是会闪动啊

你这样改只是把过度的兼容性语句去掉，根本看不出上面变化。transform: scale(5); transition: all 1s ease 0s;这两句才是你的过度效果。我的意思是删除这个来检查，但矛盾的是你删除这个你的图片也不会有什么变化，所以也检查不了什么。
我的意思是你根据我的思路去想一想调试方法，或者是说改变一下你的方法。
你可以试一试直接改变图片高和宽来做，不要用 transform: scale(5);

可以改用js动画来实现。。。

你这样改只是把过度的兼容性语句去掉，根本看不出上面变化。transform: scale(5); transition: all 1s ease 0s;这两句才是你的过度效果。我的意思是删除这个来检查，但矛盾的是你删除这个你的图片也不会有什么变化，所以也检查不了什么。
我的意思是你根据我的思路去想一想调试方法，或者是说改变一下你的方法。
你可以试一试直接改变图片高和宽来做，不要用 transform: scale(5);

我直接设置了宽高还是不行，鼠标放在图片边缘就会一直闪

可以改用js动画来实现。。。

什么意思啊?在js里面设置css吗？效果一样的啊

可以改用js动画来实现。。。

谢谢，animate函数可以实现。

可以用JQuery来实现啊

     transition: all 1s ease 0s;应该写在a后而非 ：hover事件之后 。 }

js设置一个延时展示或者延时隐藏比较好，另外easy ui 的datagrid不太适合这个...

很简单的写法如
img{overflow:hidden;transition:all 5s;}
img:hover{transform:scale(1.2)}
鼠标放上去图片就会慢慢变大，效果不错

     transition: all 1s ease 0s;应该写在a后而非 ：hover事件之后 。 }

这样图片是不闪了，但是图片就不会慢慢放大了啊

js设置一个延时展示或者延时隐藏比较好，另外easy ui 的datagrid不太适合这个...

之前用jquery animate函数鼠标在多张图片之间来回晃几下，动画就停不下来了

很简单的写法如
img{overflow:hidden;transition:all 5s;}
img:hover{transform:scale(1.2)}
鼠标放上去图片就会慢慢变大，效果不错

360兼容模式下就成这样了
还有ie9以下是不支持其它元素伪类的

js设置一个延时展示或者延时隐藏比较好，另外easy ui 的datagrid不太适合这个...

之前用jquery animate函数鼠标在多张图片之间来回晃几下，动画就停不下来了

这么炫的效果，确实有点难度。。。。。。

http://www.kendoui.io/examples/grid/index.html

这个比较炫，你看下。、

js设置一个延时展示或者延时隐藏比较好，另外easy ui 的datagrid不太适合这个...

之前用jquery animate函数鼠标在多张图片之间来回晃几下，动画就停不下来了

这么炫的效果，确实有点难度。。。。。。

http://www.kendoui.io/examples/grid/index.html

这个比较炫，你看下。、

嗯嗯，谢谢。
我把transition:all 1s ease 0s写在img后面，基本上就可以正常使用了。

js设置一个延时展示或者延时隐藏比较好，另外easy ui 的datagrid不太适合这个...

之前用jquery animate函数鼠标在多张图片之间来回晃几下，动画就停不下来了

这么炫的效果，确实有点难度。。。。。。

http://www.kendoui.io/examples/grid/index.html

这个比较炫，你看下。、

嗯嗯，谢谢。
我把transition:all 1s ease 0s写在img后面，基本上就可以正常使用了。

js设置一个延时展示或者延时隐藏比较好，另外easy ui 的datagrid不太适合这个...

之前用jquery animate函数鼠标在多张图片之间来回晃几下，动画就停不下来了

这么炫的效果，确实有点难度。。。。。。

http://www.kendoui.io/examples/grid/index.html

这个比较炫，你看下。、

嗯嗯，谢谢。
我把transition:all 1s ease 0s写在img后面，基本上就可以正常使用了。