移动和PC端中的hover处理

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

温馨提示本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接

已有3人参与

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

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新留言

  • admin

    客气了,请继续关注我们QQ群:295431592...

  • essaypinglun

    感谢楼主的分享...

  • 游客1

    非常好...

  • 游客

    这些插件都不错的...

  • 第三方

    似懂非懂...

  • admin

    有些是可以的,需要叠加很多层。...

  • 素材火

    纯css能实现吗?...

  • 小白

    json很实用,不过很多在用jsonp了,希望你们能多出些jsonp的文章。...