×

移动和PC端中的hover处理

作者:Terry2015.03.26来源:Web前端之家浏览:97310评论:5
关键词: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;

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/mo-pc-hover-done.html

网友评论文明上网理性发言已有5人参与

发表评论:

评论列表

  • HTML5爱好者HTML5爱好者 发布于 2015-04-09 14:37:31  回复该评论
  • 虽然还没遇到这个问题,感觉以后工作中肯定会碰到,记录下~~