如何实现css移动端与pc端一样的acitve效果-创新互联

本篇内容主要讲解“如何实现css移动端与pc端一样的acitve效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何实现css移动端与pc端一样的acitve效果”吧!

高邮ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“鼠标指针浮动在其上的元素”的情况,有也很少。 所以取代的应该:active这个选择器,但是通过实践,发现情况不是很理想,在QQ浏览器上有时触发,有没不触发,在我mx3带自浏览器上根本没效果。

最近在看美团h6的页面时发现他们做对这个效果做得很好(这里说实话,美团网在h6这一块做得真好),看了他们代码之后,发现他们也是用:active来实现这个效果,但他们多了一行js代码,



代码如下:


document.body.addEventListener('touchstart', function () { });



其实这行代码带没有做什么事,只是对body绑定了一个touchstart事件,然后也没做什么事。

自已实践了一下发现可以了,效果真心不错。赞一下美团。

ps:在移动端中浏览器会有自带的一个点击高亮效果,可以通过给a标签或者body,html加



代码如下:


-webkit-tap-highlight-color:transparent;


到此,相信大家对“如何实现css移动端与pc端一样的acitve效果”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前题目:如何实现css移动端与pc端一样的acitve效果-创新互联
URL地址:http://myzitong.com/article/dohdid.html