cursor属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。
不过,这个属性用在PC端没有任何问题,但是用在移动端就有问题了。
有人说,移动端用不上这个属性,PC端才有可能用的上。是,说的没错,PC端能用得上,移动端确实用不上,因为移动端都是手指直接触摸屏幕,点击过后就直接出现了我们想要的效果,根本就用不上这个属性。不过,我们在开发移动端时,难免会在有些地方(除了a标签)用到点击事件,因此就会在css中习惯地加上一个cursor:pointer的样式,但项目结束后,我们可能会忘记删除这个样式,此时,问题就来了。
这个问题,在移动端的tab标签页中能很明显的体现出来,即当我们点击tab标签页的一个导航时,使用了cursor:pointer样式的导航会在瞬间额外的添加一个背景色,在微信浏览器中会额外的添加一个蓝色的背景色和一个蓝色的边框,这个问题貌似只出现在安卓手机上,我用苹果手机测试过,没有出现这个问题。
一开始,我也不知道问题出在哪儿,因为css代码和js代码没有问题啊,然后又从网上查找解决的办法,可网上关于这个问题的毛都没有,看来,问题还是我自己造成的,羊毛出在羊身上。于是,我就单独写了一个这样的效果,这次是没有加上cursor:pointer属性,所以也就没有这个问题,但我依旧没有想到问题到底出现在哪儿。实在没辙了,就用最笨的方法吧,于是,我就把原来的项目备份了一份,然后将其中其他不相关的代码和样式统统删掉,只留下和tab标签页相关的代码和样式,结果可想而知,依旧没有解决问题。最后,我就挨个删除和tab标签页的导航相关的样式,终于,找到了cursor:pointer这个导致出现问题的样式。哈哈...,皇天不负有心人啊,删掉这个样式,问题搞定,心里美滋滋的~ ~

下面的图片就是本人在测试的页面中加入的会导致出现问题的cursor:pointer样式:

目前还不清楚加了这个样式后就会出现问题的原因,欢迎有知道的童鞋给在下留言,定感谢!

在这里强烈建议各位童鞋们,在开发移动端时,尽量不要把开发PC端的习惯带到移动端,否则,会有你意想不到的“惊喜”在等着你哦~ ~

移动端/H5关于cursor:pointer导致的问题的更多相关文章

  1. 移动端 cursor:pointer问题

    之前一直没有注意过,为元素设置上cursor:pointer属性后,会导致元素点击时出现一个蓝色的背景. 为元素设置-webkit-tap-highlight-color: transparent;可 ...

  2. 移动端h5页面的那些坑

    最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白 解决办法:在全局样 ...

  3. 移动端H5开发遇到的问题及解决方法

    本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ...

  4. 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

    https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...

  5. 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP

    这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...

  6. 移动端H5地图矢量SHP网格切分打包方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...

  7. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  8. 移动端H5地图离线瓦片方案(1)(2)

    2在作者另一篇 移动端H5地图离线瓦片方案   文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 移动端的网速和 ...

  9. 移动端H5微信分享

    移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档:  微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...

随机推荐

  1. 利用pg_stat_activity进行问题排查

    pg_stat_activity是一个非常有用的视图,可以帮助排查pg的一些问题(如连接数目过多问题).pg_stat_activity每行展示的是一个“process”的相关信息,这里的“proce ...

  2. UIScrollView的基本使用

    UIScrollView的用法很简单 将需要展示的内容添加到UIScrollView中 设置UIScrollView的contentSize属性,告诉UIScrollView所有内容的尺寸,也就是告诉 ...

  3. URL传递中文字符,特殊危险字符的解决方案(仅供参考)urldecode、base64_encode

    很多时候,我们需要在url中传递中文字符或是其它的html等特殊字符,似乎总会有各种乱,不同的浏览器对他们的编码又不一样, 对于中文,一般的做法是: 把这些文本字符串传给url之前,先进行urlenc ...

  4. Shell入门教程:流程控制(1)命令的结束状态

    在Bash Shell中,流程控制命令有2大类:“条件”.“循环”.属于“条件”的有:if.case:属于“循环”的有:for.while.until:命令 select 既属于“条件”,也属于“循环 ...

  5. IE 8 下的 box-sizing 和 min-* 属性

    在非 IE 浏览器中,默认情况下 width 属性指的是内容区域(content)的宽度. IE 6+ 中,如果浏览器以标准模型渲染,和非 IE 浏览器的表现是一致的:如果浏览器以怪癖模式渲染,则 w ...

  6. linux常用命令-权限管理命令

    chmod  [{ugoa}{+-=}{rwx}] [文件或目录] [mode=421] [文件或目录] -R 递归修改 例:chmod g+w,o-r 文件或目录 但是一般用数字配置权限,例:chm ...

  7. 多线程更新UITableView时容易导致的问题

    我请求同一个接口两次, 第一次是那缓存, 第二次是那网络数据在请求成功回调的主线程异步的, 先赋值数据源, 然后调用uitableview reloaddata的方法, 这时候问题来了 reloadd ...

  8. Android 设置启动界面

    启动界面的意义是为了让后台处理耗时的复杂工作,当工作处理完成后,即可进入主界面.相比让用户等待布局加载完成,使用一张图片作为启动背景,会带来更好的体验. 首先,需要建立一个简单的布局: <?xm ...

  9. [转]Ubantu vmware tools 安装

    https://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&external ...

  10. [jquery]折叠指定条件的表格

    最近在做财务报表时候,一些表格要做特定折叠效果 这里通过2个自定义属性来对表格之间的属性作关联 date-head和date-num,输出表格时候,可以按照这2个自定义属性给某些带父子层级关系的内容指 ...