今天小编跟大家讲解下有关css移动端实现与pc端一样的:acitve效果 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css移动端实现与pc端一样的:acitve效果 的相关资料,希望小伙伴们看了有所帮助。
做移动前端也有一些日子了 一直有个问题没有解决 就是与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;都行。来源:爱蒂网