一般是用这个委类: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. PHP开发之Zend Studio快捷键汇总

    应用场景 快捷键 功能 查看快捷键 ctrl+shift+l 显示所有快捷键列表 查看和修改快捷键 打开Window->Preferences->General->keys 修改字体 ...

  2. Appfuse：起步

    在众多开源的Java开源CMS中探索了很久,终于选定了appfuse,理由如下: 1. 简洁:只搭建了框架,没有做多余的事 2. 完成了基本的用户管理:用户.角色.权限的定义很清晰 3. 符合预期的架 ...

  3. window.frameElement的使用

    window.frameElement的使用: 返回嵌入当前window对象的元素(比如 <iframe> 或者 <object>),如果当前window对象已经是顶层窗口,则 ...

  4. php之验证码小程序

    验证码功能(个人理解): 减轻服务器的压力(如12306的验证码功能): 防止暴力注册 个人思路:在a-z,A-Z,1-9生成n位随机的数来构成新的验证码. 关于生成验证码的几个小函数 range() ...

  5. MongoDB学习笔记~为IMongoRepository接口添加了增删改方法，针对官方驱动

    回到目录 上一讲说了MongoDB官方驱动的查询功能,这回说一下官方驱动的增删改功能,驱动在升级为2.0后,相应的insert,update和delete都只有了异步版本(或者叫并行版本),这当然也是 ...

  6. 发现 OpenStack: 架构、功能和交互

    原文:http://www.ibm.com/developerworks/cn/cloud/library/cl-openstack-overview/index.html OpenStack 是由 ...

  7. Android入门笔记（一）

    第一部分,Android开发环境的搭建 1.去http://www.oracle.com/technetwork/java/javase/downloads/index.html下载最新版本jdk并安 ...

  8. Struts2 入门

    一.Struts2入门案例 ①引入jar包 ②在src下创建struts.xml配置文件 <?xml version="1.0" encoding="UTF-8&q ...

  9. ubuntu系统下，gsl 库链接问题 -undefined reference to `cblas_xxx`

    今天在ubuntu系统下进行程序调试的时候出现以下错误信息: [ %] Linking CXX executable ../test_coco /usr/local/lib/libgsl.so: un ...

  10. 几个不错的webgl教程网

    http://ogldev.atspace.co.uk/index.html http://www.opengl-tutorial.org/ http://blog.wysaid.org/catego ...