在做移动端页面的时候，会发现PC上那种:hover的效果是不管用了的，但又要给用户一个点击反馈怎么办呢？我管它叫触觉反馈。

　　细心点就会发现浏览器有自带了一点触觉反馈，在点击a、button、input的时候都会出现，像这样：

　　

　　应该有见过的吧。。这个应该是浏览器的默认样式，有时候是想要这样的，可以加样式解决，比如：

a,button,input{-webkit-tap-highlight-color:rgba(255,255,255,0);}

　　其实就是把a、button、input这些标签的系统触觉反馈的样式改了，白色透明：rgba(255,255,255,0);

　　最好加上哦，不然这个和以下自定义的样式同时出现还是挺怪的。

　　然后我们怎么自定义样式呢？以前曾经试过ontouchstart、ontouchend。。结果感觉实在是太麻烦了！而且感觉性能也很差，肯定有更好的办法。。

　　那就是:active这个伪类，duangduangduangduang!。像这样

a{color:#1ec4a3;}

a:active{color:#28A289;}

　　当手点下去的时候理论上讲是会变得更绿的。

　　但是是没用的！！

　　其实是因为少了行启用触觉事件监听的代码，只要在body上加上ontouchstart就好了，像这样：

<body ontouchstart>

　　内容

</body>

　　或者在你喜欢的地方插入js：

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

　　就好啦！！

　　然后有些可能要对div做触觉反馈，可以考虑给body或需要的地方加上:

-webkit-user-select: none;

　　这样会把系统字体放大镜、复制等给干掉。看需要加把 :)。

　　

微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效的更多相关文章

  1. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  2. 移动端:active伪类无效的解决方法

    :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等. ...

  3. 移动端bug~~移动端:active伪类无效的解决方法【移动端 ：active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  4. iOS Web开发激活css的active伪类

    最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效, ...

  5. css :active伪类的理解

    /*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/

  6. 解决ios不支持按钮:active伪类的方法

    mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :active state unless t ...

  7. 手机端css实现active伪类

    今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可 ...

  8. H5解决active伪类失效---点击后背景效果

    <body ontouchstart></body> 给body注册一个空事件即可

  9. 获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类

    2. 默认的监听方式 document.addEventListener('touchstart', function(){ alert('hello'); }, false); 使用jquery时 ...

随机推荐

  1. Lua 学习笔记（四）语句与控制结构

    一.赋值与多重赋值      赋值的基本含义是改变一个变量的值或table中字段的值.Lua中允许“多重赋值”,也就是同时为多个值赋予多个变量,每个变量之间以逗号分隔.      Lua会先对等号右边 ...

  2. c++ ofstream & ifstream文件流操作

    ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间; //ofstream & ifstream inherit from istream class ...

  3. [OpenCV] Samples 06: [ML] logistic regression

    logistic regression,这个算法只能解决简单的线性二分类,在众多的机器学习分类算法中并不出众,但它能被改进为多分类,并换了另外一个名字softmax, 这可是深度学习中响当当的分类算法 ...

  4. 全球酷站秀：15个顶尖的 CSS3 网站作品

    每天有数以百计的网站推出,其中很多优秀网站被推荐到 CSS 画廊供大家评分和评论,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15个来自全球各地的 CSS3 网站设计作品, 它们都是赢得 C ...

  5. 如何解读SQL Server日志(2/3)

    接下来说说返回的RowLogo Content列,例子中返回了三个列.这些列包含了数据操作的"有效工作负载(Playload)"记录.根据不同操作类型有效负载的内容也是不同的,但是 ...

  6. Ionic2学习笔记（0）：HelloWorld

    作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统: Windows 10 环境配置: Node.js Java SE D ...

  7. log4net 既要按日期分割日志文件，又要按文件大小分割。

    <appender name="DebugAppender" type="log4net.Appender.RollingFileAppender"> ...

  8. 【原创】Lucene.Net+盘古分词器(详细介绍)

    本章阅读概要 1.Lucenne.Net简介 2.介绍盘古分词器 3.Lucene.Net实例分析 4.结束语(Demo下载) Lucene.Net简介 Lucene.net是Lucene的.net移 ...

  9. 动态dynamically变更母版_Layout页body标签css的class

    这个功能演示是Insus.NET最近想实现的一个功能,就是动态dynamically变更母版_Layout页body标签的样式css的class. 很多视图共同一个母版_Layout页,但是某一个视图 ...

  10. Linux移植的一般过程

    前一阵子在公司移植Linux2.6到一块ARM11的开发板上,下面粗略讲讲移植Linux的一般过程. 一开始的UBOOT的移植不多说了.UBOOT最后有两种方式进入Linux,一种是使用uImage, ...