一般是用这个委类:active

参考：http://www.w3school.com.cn/cssref/selector_active.asp

但是业界上实现的效果中，今日头条的手机端网页却不是这样的，当点击时是一闪而过，也有非常漂亮的圆角，如下图：

初步分析，没有在css文件上找到active的样式，我初步怀疑是用js添加上去的；且这个有个特点：点击时是一闪1秒，而用active是一直都在，除非你放开。

最终还是没研究出，只能用土办法，直接active去实现。

接下来是发现在iOS微信上无法使用active的属性

解决办法：在body加入：

  1. <body ontouchstart="" onmouseover="">
  2. </body>

参考：

https://www.zhihu.com/question/24373267

http://stackoverflow.com/questions/8330559/hover-effects-using-css3-touch-events

HTML实现点击时的阴影(:active)（已解决iOS微信上无法使用）的更多相关文章

  1. input，button制作按钮IE6，IE7点击时1px黑边框的解决方法

    按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn ...

  2. 手机上怎么去掉a 标签中的img点击时的阴影？

    添加: <style type="text/css"> a { -webkit-tap-highlight-color: transparent; -webkit-to ...

  3. 使用Mac下的sequel Pro链接数据库时提示错误（已解决）

    使用Mac下的sequel Pro链接数据库时,出现如下问题: ? 1 MySQL said: Authentication plugin 'caching_sha2_password' cannot ...

  4. 编译Uboot时出错：【已解决】 /bin/bash: arm-linux-gcc: command not found dirname: missing operand Try 'dirname --help' for more information.

    编译Uboot时出错: 错误信息如下: /bin/bash: arm-linux-gcc: command not found dirname: missing operand Try 'dirnam ...

  5. linux下安装Oracle时交换空间不足的解决方法

    摘:linux下安装Oracle时交换空间不足的解决方法 linux上安装Oracle时交换空间不足的解决办法 增加交换空间有两种方法: 严格的说,在系统安装完后只有一种方法可以增加swap,那就是本 ...

  6. 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序

    1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...

  7. 取消a标签在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...

  8. 取消a标签或者onclick在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...

  9. css：url链接去下划线+点击前黑色+点击时灰色+点击后黑色

    一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...

随机推荐

  1. IOS开发之Bug--关于UIImageView的使用

    这里是遇到的一个关于使用UIImageView的小bug,bug就是加载不出来图片. 原因:如果图片资源是jpg文件,如果代码没有加后缀.jpg就会出现不加载出来的情况: 添加上.jpg就能加载出来了 ...

  2. MySQL学习笔记之视图

    视图是对磁盘上保存的表数据的抽象,即抽取一个表或多个表的部分行或列的数据,展示给使用者. 首先列举下MySQL中最简单的对视图操作的语法: 1.创建视图: create view 视图名 as sel ...

  3. 杀毒软件导致YourSQLDba备份失败

    有一朋友咨询我,他配置的YourSQLDba 备份作业经常出现备份失败的情况,我帮忙查看了一下,首先从告警邮件中查看出错的具体信息,执行了下面SQL语句(来自于告警邮件) Exec YourSQLDb ...

  4. Vim快捷键记录（工作中遇到）

    一 移动类 1. 移动到文件首行 gg 2. 移动到文件末行 G 3. 移动到当前屏首行 H 4. 移动到当前屏末行 L 二 编辑类 1. 替换字符 r 2. 删除字符 x 3. 撤销编辑(还原被修改 ...

  5. Mysql有用的面试题

    A.一道SQL语句面试题,关于group by表内容:2005-05-09 胜2005-05-09 胜2005-05-09 负2005-05-09 负2005-05-10 胜2005-05-10 负2 ...

  6. TCP协议

    TCP是一个面向连接的协议,在发送数据之前,必须在双方之间建立一条连接. TCP首部 TCP数据封装在IP数据报中 TCP包首部 下面简单说明部分字段的作用: 端口号:通讯双方由IP地址和端口号标识. ...

  7. 配置TortoiseSVN客户端, 强制签入前加注释

    正如上篇提到, 总有一些人在签入代码到SVN前没有加注释, 然后, 像这样: 鬼才知道改了什么东西. ①有些人可能就是没有写注释的习惯, ②有些人可能是忘记写注释 && SVN服务端和 ...

  8. strcat 函数的实现

    原型        extern char *strcat(char *dest,char *src); 用法        #include <string.h> 功能        把 ...

  9. J2EE基础之Servlet

    J2EE基础之Servlet 1.  什么是Servlet? Servlet即Java服务小程序,是使用应用程序设计接口以及相关类和方法的Java程序.它可以作为一种插件,像Applet程序一样嵌入到 ...

  10. Struts2 JSON

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式 (本质是一种数据传输格式) 定义json对象 var json={"firstName" ...