一般是用这个委类: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. 如何给不支持新特性的浏览器打补丁(让老版本IE兼容新特性)

    一个非常棒的 JavaScript 框架叫做 Modernizr(http://www.modernizr. com),用于向缺少 HTML5/CSS3特性支持的浏览器打补丁.由 Alexander ...

  2. Redis 5种数据结构使用及注意事项

    1优缺点 非常非常的快,有测评说比Memcached还快(当大家都是单CPU的时候),而且是无短板的快,读写都一般的快,所有API都差不多快,也没有MySQL Cluster.MongoDB那样更新同 ...

  3. Nagios学习实践系列——配置研究[监控当前服务器]

    其实上篇Nagios学习实践系列——基本安装篇只是安装了Nagios基本组件,虽然能够打开主页,但是如果不配置相关配置文件文件,那么左边菜单很多页面都打不开,相当于只是一个空壳子.接下来,我们来学习研 ...

  4. JSP分页显示实例(基于Bootstrap)

    首先介绍一款简单利落的分页显示利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-pagina ...

  5. StarkSoft题库管理系统(二)--生成word格式试卷

    一.功能介绍    1.自定义试题库管理系统目录.难易程度,题型,知识库等.    2.试题录入.    3.强大的试题编辑功能,并与通常应用编辑工具有共通.    4.灵活的试卷构造功能,用户可自定 ...

  6. CentOS 7 虚拟机无法开机问题

    若虚拟机在不正常关机的时候会遇到如下图所示的问题:先点击"取消"按钮

  7. 深入理解Thread.sleep的含义

    转载一篇对sleep说的非常好的一篇文章,原文http://www.cnblogs.com/ILove/archive/2008/04/07/1140419.html 我们可能经常会用到 Thread ...

  8. ActionBar修改字体颜色

    style: <resources xmlns:android="http://schemas.android.com/apk/res/android"> <!- ...

  9. AD设置板子原点

  10. final finally finalize 区别

    public class Demo { public static void main(String[] args) { long start = System.currentTimeMillis() ...