css挪动端完成与pc端1样的:acitve实际效果

2021-03-06 17:01 jianzhan
做挪动前端开发也是有1些生活了,1直有个难题沒有处理,便是与pc端那样的1个:hover的实际效果,:hover是电脑鼠标指针波动在其上的元素的1个挑选器,但由于在挪动端是沒有电脑鼠标的,替代的是触碰屏,客户也并不是有“电脑鼠标指针波动在其上的元素”的状况,有也非常少。 因此替代的应当:active这个挑选器,可是根据实践活动,发现状况并不是很理想化,在QQ访问器上有时开启,有没不开启,在我mx3带自访问器上压根没实际效果。

近期在看美团h5的网页页面时发现她们做对这个实际效果做得很好(这里说真话,美团网在h5这1块做得真好),看了她们编码以后,发现她们也是用:active来完成这个实际效果,但她们多了1行js编码,


拷贝编码
编码以下:

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

实际上这行编码带沒有做甚么事,只是对body关联了1个touchstart恶性事件,随后也没做甚么事。

自已实践活动了1下发现能够了,实际效果真心实意非常好。赞1下美团。

ps:在挪动端中访问器会有自带的1个点一下高亮度实际效果,能够根据给a标识或body,html加 

拷贝编码
编码以下:

-webkit-tap-highlight-color:transparent;


都行。