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

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

WBOY
Freigeben: 2016-06-24 11:34:24
Original
2132 Leute haben es durchsucht

图片是放在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事件之后 。 }
Nach dem Login kopieren
Nach dem Login kopieren

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

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

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


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

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后面,基本上就可以正常使用了。
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage