移动和PC端中的hover处理

移动和PC端中的hover处理

最近都忙死了，好久都没更新博客了。今天还是想提下移动端的问题 :hover选择器。

说到移动和PC端中的hover处理问题，已经碰到过很多次了，先前一直没去仔细的研究过，有时候忽略过去了。众所周知，现在项目都注重交互用户体验，譬如按钮之类的都加上hover效果。但是这个效果在PC端体验很好，如果页面需要做成响应式，那问题就来了，发现在移动端点击按钮后，会执行PC的hover效果，然后再跳转，返回的时候还是保持了hover效果。

我们要的效果就是在PC和移动端都保持一样的效果。于是我想到了:actived选择器，发现在不同手机浏览器上效果不一样，有的有效果，有得却没，烦躁ing.....

后来有一天无意中在美团上团购2张电影票，发现他们的处理方式很好。如果回去打开网站研究了一番，处理方法让我大吃一惊，一句代码搞定：

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

太神奇了，其实这句代码也没干什么，只有在BODY上绑定了一个touchstart事件。在性能上没什么影响，可以采取。希望能帮到正在为此问题发愁的你，如你有好的方法也可以留言给我。

在这里也想补充一下：在移动端中浏览器会有自带的一个点击高亮效果，可以通过给a标签或者body,html加如下代码：

-webkit-tap-highlight-color:transparent;