一般是用这个委类: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. Xcode 创建.a和framework静态库(转载)

    库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. iOS中的静态库有 .a 和 .framework两种形式:动态库有.dylib 和 .framew ...

  2. Oracle表的几种连接方式

    1,排序 - - 合并连接(Sort Merge Join, SMJ) 2,嵌套循环(Nested Loops, NL) 3,哈希连接(Hash Join, HJ) Join是一种试图将两个表结合在一 ...

  3. CSS补充与JavaScript基础

    一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...

  4. jquery2源码分析系列

    学习jquery的源码对于提高前端的能力很有帮助,下面的系列是我在网上看到的对jquery2的源码的分析.等有时间了好好研究下.我们知道jquery2开始就不支持IE6-8了,从jquery2的源码中 ...

  5. 谈谈Redis的SETNX

    谈谈Redis的SETNX 发表于2015-09-14 在 Redis 里,所谓 SETNX,是「SET if Not eXists」的缩写,也就是只有不存在的时候才设置,可以利用它来实现锁的效果,不 ...

  6. 俄罗斯方块（Win32实现，Codeblocks+GCC编译）

    缘起: 在玩Codeblocks自带的俄罗斯方块时觉得不错,然而有时间限制.所以想自己再写一个. 程序效果: 主要内容: 程序中有一个board数组,其中有要显示的部分,也有不显示的部分,不显示的部分 ...

  7. 三种方法查看MySQL数据库的版本

    1.使用-V参数 首先我们想到的肯定就是查看版本号的参数命令,参数为-V(大写字母)或者--version 使用方法: D:\xampp\mysql\bin>mysql -V 或者 D:\xam ...

  8. 嵌入式Linux驱动学习之路(二十三)NAND FLASH驱动程序

    NAND FLASH是一个存储芯片. 在芯片上的DATA0-DATA7上既能传输数据也能传输地址. 当ALE为高电平时传输的是地址. 当CLE为高电平时传输的是命令. 当ALE和CLE都为低电平时传输 ...

  9. 使用startActivityForResult场景模拟

    效果图如下,当我从第一个界面选择供应商的时候,我希望能得到第二个界面选择的供应商的值: 具体代码,这里第二个参数为自定义的大于等于0的数字,用来标记当前跳转. Intent i1 = new Inte ...

  10. 申请邓白氏编码的时候总是提示 Enter a valid Street Address 怎么办？

    今天要申请一个苹果开发者公司(Company)账号,然后需要邓白氏编码,然后填写企业的基本信息.其中对于Street Address认真的对照着中文翻译为如下格式: Kang Hesheng buil ...