zoukankan      html  css  js  c++  java
  • css移动端:acitve效果的实现

    做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“鼠标指针浮动在其上的元素”的情况,有也很少。 所以取代的应该:active这个选择器,但是通过实践,发现情况不是很理想,在QQ浏览器上有时触发,有没不触发,在我mx3带自浏览器上根本没效果。

    最近在看美团h5的页面时发现他们做对这个效果做得很好(这里说实话,美团网在h5这一块做得真好),看了他们代码之后,发现他们也是用:active来实现这个效果,但他们多了一行js代码,

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

    其实这行代码带没有做什么事,只是对body绑定了一个touchstart事件,然后也没做什么事。

    自已实践了一下发现可以了,效果真心不错。赞一下美团。

    ps:在移动端中浏览器会有自带的一个点击高亮效果,可以通过给a标签或者body,html加

    -webkit-tap-highlight-color:transparent;
  • 相关阅读:
    xhr1.0和xhr2.0的区别
    Java10-堆和栈
    Java09-函数
    Java08-函数
    java基础7-流程控制3
    Java基础-流程控制2
    Java基础—流程控制1
    breadcrumbs面包屑是啥?
    Font test 字体大小测试用JS代码实现
    数据库密码要BS64才能登录
  • 原文地址:https://www.cnblogs.com/makan/p/4740076.html
Copyright © 2011-2022 走看看