幽灵资源网 Design By www.bzswh.com
做移动前端也有一些日子了，一直有个问题没有解决，就是与pc端那样的一个:hover的效果，:hover是鼠标指针浮动在其上的元素的一个选择器，但因为在移动端是没有鼠标的，代替的是触摸屏，用户也不是有“鼠标指针浮动在其上的元素”的情况，有也很少。 所以取代的应该:active这个选择器，但是通过实践，发现情况不是很理想，在QQ浏览器上有时触发，有没不触发，在我mx3带自浏览器上根本没效果。
最近在看美团h5的页面时发现他们做对这个效果做得很好（这里说实话，美团网在h5这一块做得真好），看了他们代码之后，发现他们也是用:active来实现这个效果，但他们多了一行js代码，
复制代码代码如下:
document.body.addEventListener('touchstart', function () { });
其实这行代码带没有做什么事，只是对body绑定了一个touchstart事件，然后也没做什么事。
自已实践了一下发现可以了，效果真心不错。赞一下美团。
ps:在移动端中浏览器会有自带的一个点击高亮效果，可以通过给a标签或者body,html加
复制代码代码如下:
-webkit-tap-highlight-color:transparent;
都行。
最近在看美团h5的页面时发现他们做对这个效果做得很好（这里说实话，美团网在h5这一块做得真好），看了他们代码之后，发现他们也是用:active来实现这个效果，但他们多了一行js代码，
复制代码代码如下:
document.body.addEventListener('touchstart', function () { });
其实这行代码带没有做什么事，只是对body绑定了一个touchstart事件，然后也没做什么事。
自已实践了一下发现可以了，效果真心不错。赞一下美团。
ps:在移动端中浏览器会有自带的一个点击高亮效果，可以通过给a标签或者body,html加
复制代码代码如下:
-webkit-tap-highlight-color:transparent;
都行。
标签：
css,移动端,acitve
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...