之前一直没有注意过，为元素设置上cursor:pointer属性后，会导致元素点击时出现一个蓝色的背景。

为元素设置-webkit-tap-highlight-color: transparent;可以解决这个问题。

-webkit-tab-highlight-color是一个不规范的属性(unsupported WebKit property),它没有出现在CSS规范草案中。

当用户点击IOS的Safari浏览器中的链接或JavaScript的可点击元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度，iOS Safari使用默认的透明度，当透明度设为1,元素在点击时不可见。

语法：

-webkit-tap-highlight-color:color；

默认值：inherit

适用于：链接元素比如新窗口打开，img元素比如保存图像等等。

取值：

color:颜色值

transparent:透明值

移动端 cursor:pointer问题的更多相关文章

  1. 移动端/H5关于cursor:pointer导致的问题

    cursor属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 不过,这个属性用在PC端没有任何问题 ...

  2. 苹果手机不支持click文字 需要添加 cursor:pointer 才能 识别可以点击

    给一个div 绑定一个 click事件,  苹果手机会识别不了,必须添加一个 cursor:pointer 才能 识别可以点击.安卓正常识别.

  3. cursor:pointer

    .cursor_hand{ cursor:pointer; }

  4. cursor:hand与cursor:pointer的区别介绍

    cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行. cursor:hand :IE完全支持.但是在firefox是不支持的,没有效果. cu ...

  5. input框type=file设置cursor:pointer的问题

    为了让美化上传文件框,设置了cursor:pointer;,然而不起作用,然后百度找到了解决方法,设置font-size:0,这样就可以了.

  6. cursor:hand & cursor:pointer

    1.cursor:hand & cursor:pointer都是将鼠标设置为手形. 2.cursor:hand存在兼容性问题,firefox并不支持该属性值.但大部分主流浏览器支持cursor ...

  7. 横向文本框 cursor:pointer 出现手型

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. cursor: hand和cursor:pointer的区别

    cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行. cursor:hand :IE完全支持.但是在firefox是不支持的,没有效果. cu ...

  9. cursor:pointer的意思

    cursor规则是设定网页浏览时用户鼠标指针的样式,也就是鼠标的图形形状cursor:pointer设定鼠标的形状为一只伸出食指的手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式另外可以选 ...

随机推荐

  1. Java IO编程全解（三）——伪异步IO编程

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7723174.html 前面讲到:Java IO编程全解(二)--传统的BIO编程 为了解决同步阻塞I/O面临 ...

  2. R-CNN论文翻译——用于精确物体定位和语义分割的丰富特征层次结构

    原文地址 我对深度学习应用于物体检测的开山之作R-CNN的论文进行了主要部分的翻译工作,R-CNN通过引入CNN让物体检测的性能水平上升了一个档次,但该文的想法比较自然原始,估计作者在写作的过程中已经 ...

  3. Problem B: 点之间的距离

    #include <iostream> #include <vector> #include <cmath> #include <algorithm> ...

  4. spring boot + thymeleaf 3 国际化

    在给spring boot 1.5.6 + thymeleaf 3进行国际化时,踩了一个坑(其实不止一个). 现象: 看到了吧, 就是取值的key, 后面被加了_en_US 或 _zh_CN, 以及前 ...

  5. Oracle-2 - ：超级适合初学者的入门级笔记--定义更改约束，视图，序列，索引，同义词

    接着我上一篇的写,在这感觉到哇 内容好多啊   上一篇,纯手打滴,希望给个赞! 添加约束的语法: 使用 alter table 添加或删除约束,但是不能修改约束 有效化或无效化约束 添加not nul ...

  6. 泛型DAO

    最近正在学习泛型DAO,通过网上查阅资料,汇总并自己整理了一下.提前需要学习的知识java反射.泛型 用到的反射如下: Class<T>类 是java.lang包下,Class类的实例表示 ...

  7. jQuery实现checkbox即点即改，批量计数，以及中间遇到的坑

    最近要用jQuery实现一个批量删除操作,效果如下图 最终页面page.html,此页面使用了bootstrap和jQuery,如果没有需要下载一下 <!DOCTYPE html> < ...

  8. 翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. 使用flex

    Flex如何处理二义性模式: 1.词法分析器匹配输入时匹配尽可能多的字符串 2.如果两个模式都可以匹配的话,匹配在程序中更早出现的模式 上下文相关的记号 flex提供起始状态(start state) ...

  10. C#版本websocket及时通信协议实现

    1:Websocket有java.nodejs.python.PHP.等版本 ,我现在使用的是C3版本,服务器端是Fleck.客户端和服务器端来使用websocket的,下面开始讲解如何使用: 2:在 ...