cursor:pointer 点击出现蓝色闪烁效果

476 阅读1分钟

在移动端页面,点击某个元素,发现整个元素出现了,蓝色闪烁的点击效果,查看资料是因为由于cursor:pointer的css属性设置,在移动端的谷歌浏览器下点击,会出现蓝色的点击效果。

一、解决方法:

  • 1、可以注释掉使用的cursor:pointer
  • 2、可以使用属性-webkit-tap-highlight-color: transparent;
  • 3、可以使用css3新属性pointer-events: none;

二、-webkit-tap-highlight-color属性

  • 含义:是一个非标准的 CSS 属性,用于设置在点击链接时出现在链接上的突出显示的颜色。突出显示向用户表明他们的点击被成功识别,并指示他们正在点击哪个元素
  • 兼容性:该特性是非标准的,请尽量不要在生产环境中使用它

image.png

三、pointer-events: none;属性

  • 会使鼠标事件失效
  • 兼容性:基本都兼容 image.png

四、最终方案

由于自己手动实现pc端导航栏的拖拽横盘滚动,在鼠标的mousedownmousemove的事件中设置该属性。但是该属性在移动端是不会看出效果的,且在移动端是不会触发鼠标mousedownmousemove事件.因此不用上面的方法,直接在移动端情况,不去触发这两个事件,这样就可以解决蓝色闪屏问题。