大佬教程收集整理的这篇文章主要介绍了html5 – CSS转换和悬停属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个简单的HTML5 / CSS3页面,有四个面板.这些面板使用-webkit-transform将它们组合成一个很好的安排. On：hover,我使用-webkit-transform将面板调到前台.代码如下.
会发生什么：hover动作是不可靠的.如果我将鼠标滑过面板,通常会停止移动鼠标,将鼠标悬停在面板上,但面板仍处于原始位置.具体来说,从左向右滑动,最左边的两个面板似乎工作正常,但最右边的两个面板不会按比例放大,直到鼠标在面板中间.
什么会导致这个？
编辑：@L_616_10@跟进,看起来放置在变换后的元素中的链接只能在最左边(对于两个左面板)或最右边(对于两个右面板)的元素的一半上单击.换句话说,点击区域仅对元素的“更接近”的一半有效.
首先,HTML(最小例子)：
@H_772_17@<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <section id="test"> <article class="tr_left"></article> <article class="tr_midleft"></article> <article class="tr_midright"></article> <article class="tr_right"></article> </section> </body> </html>
而CSS：
@H_772_17@#test article { display: inline-block; height: 150px; width: 160px; BACkground-color: blue; -webkit-transition: -webkit-transform 0.2s ease; } #test article.tr_left { -webkit-transform: perspective(400pX) rotateY(20deg) scale(1); } #test article.tr_midleft { -webkit-transform: perspective(400pX) rotateY(8deg) scale(0.9); } #test article.tr_midright { -webkit-transform: perspective(400pX) rotateY(-8deg) scale(0.9); } #test article.tr_right { -webkit-transform: perspective(400pX) rotateY(-20deg) scale(1); } #test article:hover,#test article:active { -webkit-transform: perspective(400pX) scale(1.2); }
(ex http://jsfiddle.net/mMYrf/1/)
然后你可以做些什么使它工作,可以创建一个外部容器,填充透视区域和悬停,给内部元素悬停效果.
(例如http://jsfiddle.net/mMYrf/2/)
真棒效果btw
以上是大佬教程为你收集整理的html5 – CSS转换和悬停属性全部内容，希望文章能够帮你解决html5 – CSS转换和悬停属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
