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

ttx9n · 发表于 2014-10-13 17:40:41

移动前端如何与pc端那样的一个:hover的效果，在看美团h5的页面时发现他们做对这个效果做得很好，它们只是多了一行代码而已，对body绑定了一个touchstart事件做移动前端也有一些日子了，一直有个问题没有解决，就是与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;

都行。

lsc54 · 发表于 2022-9-13 16:45:42

的沙发水电费水电费

lsc54 · 发表于 2022-9-17 20:16:21

554411515451555

5cf304mn2 · 发表于 2022-9-21 23:15:40

非常vbcbvcvbvcb

gyalp · 发表于 2022-10-12 01:20:56

飞飞飞飞飞飞飞飞飞飞飞飞飞

.l4 · 发表于 2023-3-29 04:17:02

数据库了多久撒快乐的健身卡啦

9jduu05 · 发表于 2024-4-2 14:20:29

还不错啊

lba36h7g · 发表于 2024-4-21 14:22:03

还有人在不。。。。。。。。。。啊

789456 · 发表于 2024-6-23 23:31:39

哦哦哦哦哦哦哦哦哦

pwseqn1h · 发表于 2024-9-11 14:29:26

需要很久了终于找到了

账号		自动登录	找回密码
密码			立即注册

[CSS] css移动端实现与pc端一样的:acitve效果

相关帖子