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

程序员文章站 2024-01-01 12:05:16

...

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

代码是这样的:

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

鼠标经过
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动画来实现。。。

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

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

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

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

谢谢，animate函数可以实现。

可以用JQuery来实现啊

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