css移动端:acitve效果的实现
2015-08-18 17:33
369 查看
做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“鼠标指针浮动在其上的元素”的情况,有也很少。 所以取代的应该:active这个选择器,但是通过实践,发现情况不是很理想,在QQ浏览器上有时触发,有没不触发,在我mx3带自浏览器上根本没效果。
最近在看美团h5的页面时发现他们做对这个效果做得很好(这里说实话,美团网在h5这一块做得真好),看了他们代码之后,发现他们也是用:active来实现这个效果,但他们多了一行js代码,
其实这行代码带没有做什么事,只是对body绑定了一个touchstart事件,然后也没做什么事。
自已实践了一下发现可以了,效果真心不错。赞一下美团。
ps:在移动端中浏览器会有自带的一个点击高亮效果,可以通过给a标签或者body,html加
最近在看美团h5的页面时发现他们做对这个效果做得很好(这里说实话,美团网在h5这一块做得真好),看了他们代码之后,发现他们也是用:active来实现这个效果,但他们多了一行js代码,
document.body.addEventListener('touchstart', function () { });
其实这行代码带没有做什么事,只是对body绑定了一个touchstart事件,然后也没做什么事。
自已实践了一下发现可以了,效果真心不错。赞一下美团。
ps:在移动端中浏览器会有自带的一个点击高亮效果,可以通过给a标签或者body,html加
-webkit-tap-highlight-color:transparent;
相关文章推荐
- 完美集群监控组合ganglia和nagios
- The method find(String, Object[]) is ambiguous for the type
- Android性能优化典范 二
- Unity Vevtor3 中文翻译
- Android 图片三级缓存之内存缓存(告别软引用(SoftRefrerence)和弱引用(WeakReference))
- IOS-笔记6(拓展,协议)
- WebView使用方法
- Hibernate SQL查询:No Dialect mapping for JDBC type: -9
- Cocos2d-x之简单数据存储 — Userdefault
- Android自定义Button字体颜色和背景颜色
- Android 对话框(Dialog) 及 自定义Dialog
- Android性能优化典范
- Cocos2d-x3.2 UserDefault用户数据
- IOS7、8模态半透明弹出框
- UIWebView复习
- Android音频播放之SoundPool
- Android 之 zygote 与进程创建
- AndroidStudio开发工具快捷键
- 自己写了一个简单的仿优酷Android客户端图片左右滑动
- Android adb无线调试,无需越狱