一般是用这个委类: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. CSS3-05 样式 4

    前言 关于 CSS 的介绍,基本上告一段落了.在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素,显示在 Web 页面的位置. 定位 概述 定义元素位置的基准,即:该元素与 HTML 文档流 ...

  2. iOS开发之Socket

    在IOS开发中,网络请求链接往往是HTTP请求,但是有些需求比较特殊,需要保持持续连接,就需要用到Socket了. 另外在游戏开发中,常常会用到Socket连接,因为http请求数据往往需要用户主动请 ...

  3. 开篇：软件项目的整个流程 - IT软件人员学习系列文章

    这段时间闲来无事,就在总结以前的项目经验,然后写成博客的形式以进行记录.本文就对<IT软件人员学习系列文章>做个开篇吧. 对于IT软件的开发来说,无外乎B/S.C/S和Android.iO ...

  4. Sqoop 结合多种系统的具体应用

    Sqoop与HDFS结合 下面我们结合 HDFS,介绍 Sqoop 从关系型数据库的导入和导出. Sqoop import 它的功能是将数据从关系型数据库导入 HDFS 中,其流程图如下所示. 我们来 ...

  5. MalformedByteSequenceException: Invalid byte 1 of 1-byte

    修改了线上程序的xml配置文件,重启后报如下错误: MalformedByteSequenceException: Invalid byte 1 of 1-byte 百度了下大体的意思是说文件的编码错 ...

  6. 浅谈Linux中的信号处理机制（三）

    一晃眼,已经到9月底了,都来不及去感慨时间匆匆.最近常常会想明年的今天我将会在那里干着什么样的工作?对未来又是憧憬又是担忧,压力山大.无论如何现在还是踏踏实实的学习吧,能这样安安静静学习的日子也不多了 ...

  7. 用Lua扩展谷歌拼音输入法

    谷歌拼音输入法最后一次更新是2013年,最近2年毫无动静,这个产品应该已经停了,不过这并不影响对它的使用,我一直喜欢它的简洁和稳定. 说不上来什么原因,忽然想起了摆弄摆弄谷歌拼音输入法的扩展特性(我经 ...

  8. [WPF系列]-高级部分 需要区分的东东

    ContentControl VS ContentPresenter What's the difference between ContentControl and ContentPresenter ...

  9. 洛谷P1328 生活大爆炸版石头剪刀布——S.B.S.

    题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...

  10. 我的CS考研路

    说在前面 从去年7月15号正式准备考研以来,直到今天,3月19号,一共经历8个多月,考研初步告捷,在此想跟大家分享一下自己的经验,希望能对接下来考研的学弟学妹们有所帮助. 首先介绍下我自己的情况,本科 ...