一般是用这个委类:active

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

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

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

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

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

解决办法：在body加入：

<body ontouchstart="" onmouseover="">

</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. C语言数组实现约瑟夫环问题，以及对其进行时间复杂度分析

    尝试表达 本人试着去表达约瑟夫环问题:一群人围成一个圈,作这样的一个游戏,选定一个人作起点以及数数的方向,这个人先数1,到下一个人数2,直到数到游戏规则约定那个数的人,比如是3,数到3的那个人就离开这 ...

  2. DBCC SHRINKDATABASE xxxx was skipped because the file does not have enough free

    假设你创建一个数据库时,指定其初始化大小(SIZE )非常大.例如,如下测试案例所示 USE [master] GO   CREATE DATABASE [TEST] ON  PRIMARY  ( N ...

  3. Android资源（图片）命名规范

    (转自:http://www.jb51.net/article/38796.htm) 图片命名注意: 1,不能以下划线("_")开头: 2,以数字加下划线("[0-9]_ ...

  4. 【转帖】嵌入式4412开发板QT5.7编译安装到arm

    QT5.7.0+UBUNTU16.04+ARM-NONE-LINUX-GNUEABI4.8+busybox最小LINUX系统 Orandragon记录 本文转自迅为4412开发板群:http://to ...

  5. [Django]Django1.8修改MySQL已存在表的问题?

    前言:django1.8版本出现这种问题,关于标题不好命令,直接看正文问题描述! 问题描述: 在已经生成了models.py中表的情况下,更改了modes.py中的表,但是syncdb不起作用报错.于 ...

  6. 【2016-11-15】【坚持学习】【Day26】【通用的SQLHelper】

    今天看DevDemo源码时候看到一个写得很好的SQLHelper 代码 public class SqlHelper<T, Command> where T : DbConnection ...

  7. 你知道 Twitter，但你可能不知道它的 “成长模式” 和 “参与阶梯”

    当你为产品创建 “成长模式” 时,你需要回答以下关键问题(类Twitter产品:http://www.jinhusns.com/Products/Download/?type=xcj ): 目标:产品 ...

  8. Serial Communication Protocol Design Hints And Reference

    前面转载的几篇文章详细介绍了UART.RS-232和RS-485的相关内容,可以知道,串口通信的双方在硬件层面需要约定如波特率.数据位.校验位和停止位等属性,才可以正常收发数据.实际项目中使用串口通信 ...

  9. 离散信源的分类和数学模型&&离散无记忆信源的熵

    1.离散信源的分类和数学模型 在离散时间发出离散符号的信源称为离散信源.如果信源符号集为有限集,则称为有限离散信源.如果信源符号集为无限可数集,则称为无限离散信源. 离散无记忆信源的N次拓展源:设信源 ...

  10. Echarts Map地图类型使用

    使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/articl ...