Rumah > hujung hadapan web > html tutorial > 鼠标经过图片放大,离开变回原形,在谷歌浏览器里面显示异常_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:34:24
asal
2132 orang telah melayarinya

图片是放在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动画来实现。。。

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


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

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


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

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


谢谢,animate函数可以实现。

可以用JQuery来实现啊

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

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

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

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


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

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后面,基本上就可以正常使用了。
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan