H5页面,使用cursor: pointer；出现的问题:点击元素时,相邻元素或者自身背景色闪烁.

最新推荐文章于 2023-09-30 22:21:08 发布
最新推荐文章于 2023-09-30 22:21:08 发布
阅读量341 收藏
点赞数 1
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64530670/article/details/130124011
版权

 首先调试. 先将元素上的点击事件去掉.  bug依旧出现. 于是去css中删除当前元素的样式. bug消失. 最后定位到产生问题的css属性:cursor: pointer; 去掉即可.

前端李十三
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5如何使用cursor,CSS属性参考 | cursor
weixin_35993148的博客
07-03 2155
CSS cursor属性用于指定当鼠标滑过某个元素时显示的鼠标光标样式。鼠标的光标可以设置为某种预定义的光标样式，或者使用图片作为鼠标的光标。cursor属性只在支持鼠标光标的设备上才有效果，在移动设备上是没有效果的。提供各种鼠标光标的样式是为了更好的用户体验。例如当鼠标滑过某个超链接或按钮时，鼠标光标会变为一个小手的样式。或者在可以进行分隔拖拽的地方，将鼠标显示为row-resize样式。这样当...
cursor:pointer导致点击蓝色闪烁
qq_33351839的博客
12-29 532
在项目中修改导航栏的过程中发现导航栏使用cursor：pointer会导致点击事件触发时导航栏蓝色闪烁，注释掉之后问题得到解决。
移动端/H5关于cursor:pointer导致的问题
盏茶作酒的博客
03-05 1853
cursor属性规定要显示的光标的类型（形状），该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。 不过，这个属性用在PC端没有任何问题，但是用在移动端就有问题了。 有人说，移动端用不上这个属性，PC端才有可能用的上。是，说的没错，PC端能用得上，移动端确实用不上，因为移动端都是手指直接触摸屏幕，点击过后就直接出现了我们想要的效果，根...
h5 cursor:pointer touch的时候，会产生阴影效果
renpinghao的专栏
11-03 1906
这个也许是为交互默认提供的，但是在我这里却成了bug。。。。
前端coursor设置为pointer在移动端点击会出现蓝色背景解决
qq_45376215的博客
07-29 1215
1，删除该属性coursor:pointer，因为在移动端该效果无效,反而点击背景会变蓝色 2，去除该效果添加如下属性 -webkit-tap-highlight-color: transparent;
H5带范围滑块拖动数值特效.zip
最新发布
10-10
/* 设置背景色 */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* 隐藏默认滑块 */ appearance: none; width: 20px; /* 设置滑块大小 */ height: 20px; background: #4CAF50; /*...
h5day1.docx
05-17
- 可通过CSS设置背景色和边框等样式。 9. **引用标签 `<blockquote>`** - 用于定义块级引用。 - 示例：`这是一段引用。</blockquote>` - 文本会自动缩进两个空格。 10. **预格式化标签 `<pre>`** - 用于展示...
html5为网页按钮增加触发式音效.rar
07-10
在CSS3方面，我们可以对按钮进行样式美化，例如添加过渡效果、圆角、自定义背景色等，使得按钮更加吸引人且易于点击。下面是一个简单的例子： ```css button { background-color: #4CAF50; /* 设置背景颜色 */ ...
【JavaScript源代码】vue实现钉钉的考勤日历.docx
12-29
width: 460px)`，这是一个响应式设计的示例，当屏幕宽度大于460px时，`.wh_item_date:hover`的背景色变为#71c7a5，同时添加`cursor: pointer`，使得鼠标悬停在日期上时有明显的交互提示。 此外，`.wh_content_item`...
html 静态 登陆 注册 页面
09-30
例如，可以设置背景色、字体样式、按钮的 hover 效果等。CSS也可以用来实现响应式设计，使页面在不同设备上都能良好显示。 ```css /* 基本样式 */ body { background-color: #f0f0f0; font-family: Arial, sans-...
关于实现点击父元素点击后显示子元素，但点击子元素不消失的方法（阻止事件传递）
Z_B_L的博客
09-30 386
阻止冒泡传播
cursor属性
qq_40650146的博客
06-19 1636
在此记录一下css属性中的一个   cursor属性最常用的就是一个cursor:pointer   一直在使用但是偶然在做别的页面的时候有特殊的样式，于是w3c上查了一下  ，有好多 ，在此记录一下cursor:crosshair   呈现十字线cursor:move  可移动cursor:ne-resize   可向上拖动cursor:wait 正在等待cursor:help 寻求帮助...
html cursor图标,HTML Cursor Code
weixin_36429993的博客
06-07 375
HTML Cursor CodeThis page contains HTML cursor code. Code that will make the user's cursor change as they hover over an HTML element.The cursor is the thing that moves when you move the mouse. To chan...
html中cursor的属性,cursor怎么用？CSS中cursor属性的使用方法以及可选值的解析
热门推荐
weixin_29822105的博客
06-04 2万+
在页面布局时，CSS是工作中必不可少的部分，常听别人讲：HTML是一个人素颜的样子，加了CSS后是一个人化妆以后的样子。这句话通俗易懂，很好的诠释了CSS与HTML之间的关系。CSS中的属性非常多，今天就着重讲一个属性，即CSS cursor属性，以及它的很多可选值，比如：cursor 手型 就是用的 cursor:pointer 这个属性。cursor怎么用？一、CSS cursor 基本语法c...
CSS中cursor 鼠标指针光标样式（形状）
Java高级教程、Java架构师、Java进阶教程
06-21 5517
在前端开发中，我们经常需要对对象鼠标指针光标进行控制，比如鼠标经过超链接时变成手指形状。在这里整理一下cursor鼠标指针光标样式的知识，记录与方便以后查找。 常用cursor光标 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crossh...
html超链接鼠标显示样式
JJmaiz-麦嘉俊-Concentrate on Web
08-31 8752
aaa default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被
前端基础学习笔记 鼠标样式cursor与盒阴影box-shadow
勤能补拙
11-26 596
鼠标样式属性 div{ cursor:default; } 如上代码可设置鼠标划入div盒子时的鼠标样式，鼠标样式有以下属性值： default 箭头 pointer 小手 wait     等待 text     文本 move  可移动 auto    浏览器根据情况来给 引入外部鼠标样式，为了防止用户找不到指定路径文件，所以需要在路径之后设置一个备胎。 div{...
html中cursor标签,CSS中cursor属性给标签加上小手形状
weixin_39747075的博客
07-03 1079
我们发现a标签在网页中有一个值得注意的地方，即鼠标移到a标签上光标会变成一只小手的图标，移出a标签后又恢复为默认箭头。如今，JS在网页中的功能越来越强大，有时候我们需要在页面中添加一些可点击的标签实现一些功能。如以下代码：鼠标指针变成文本输入图形这个例子中，我们给h1标签加上了一个onclick事件，单击弹出hi提示框。虽然功能实现了，但我们发现鼠标指针移动到h1标签上的时候指针图形编程了一个文本...
H5基础与高级技巧：内联元素、块级展示与定位
清除浮动是解决由于浮动元素导致的布局问题，通常使用`clear: both`或父元素设置`overflow: auto`等方法。 3. **定位技术**： 包括绝对定位(`position: absolute`)、相对定位(`position: relative`)和透明度(`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值