如何实现css移动端与pc端一样的acitve效果

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

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、网站设计、徽州网络推广、小程序制作、徽州网络营销、徽州企业策划、徽州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供徽州建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

做移动前端也有一些日子了，一直有个问题没有解决，就是与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效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！