美团移动端网页的这种鼠标触摸激活效果是如何实现的??

如图，这是美团的移动端html首页，当我们触摸列表中的一个选项时，其背景颜色会置灰，一开始我以为是用css的hover实现的，但是在源代码里面没有看到，由此我猜测他们应该是用js配合touchstart实现的，只是我向来不喜欢用js来实现这种激活效果。

敝司移动端正好需要用到类似的激活效果，想请教各位同学，你们是如何优雅的实现这个效果的?

图片描述

阅读 5.5k

先对<body>标签绑定了一个touchstart事件。

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

然后在要实现hover效果的标签比如<a>标签加一个:active伪类。

a:active {
    background-color: #ff6d23;
}