取消a标签长按的默认状态（非常实用）

最新推荐文章于 2024-09-07 22:26:28 发布

sjssjs12

最新推荐文章于 2024-09-07 22:26:28 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sjssjs12/article/details/88107563

本文介绍了一种优化CSS中链接元素（a:active, a:hover, a:visited）样式的方法，通过使用-webkit-tap-highlight-color属性消除点击高亮，同时禁用了用户选择和聚焦效果，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


a:active, a:hover, a:visited{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sjssjs12

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

30、Mac实用技巧大揭秘

l6m7n8的博客

07-15

本博客分享了多个Mac实用技巧，包括在Safari中下载任意文件、设置日历显示两周日程、取消Mac启动提示音、成为Mission Control高级用户、快速切换应用窗口、放大桌面内容、快速重命名文件、调整硬盘睡眠时间、强制Spotlight索引文件、关闭Time Machine磁盘请求提示以及添加自定义系统声音等。这些技巧帮助用户更高效地使用Mac，提升操作体验。

LVGL（lv_imagebutton）

最新发布

m0_49476241的博客

05-26

464

lv_imagebutton是LVGL提供的图像按钮控件，支持通过不同状态图片（默认/按下/禁用）实现交互效果。它适用于制作图标按钮、状态切换按钮等非矩形控件，支持事件回调、样式设置和多种图片加载方式。使用时需注意图片尺寸一致，可通过.c资源或文件路径加载图像，还可结合标签、动画等功能增强效果。典型应用包括播放按钮、开关按钮等需要视觉反馈的场景，是嵌入式GUI设计的实用组件。

参与评论您还未登录，请先登录后发表或查看评论

Html去除a标签的默认样式

kfepiza的博客

06-23

2596

Html去除a标签的默认样式,a标签超链接字体默认蓝色带下划线;测试代码

去掉手机端a标签点击默认状态

mememama111的专栏

06-23

308

-webkit-tap-highlight-color:rgba(255, 255, 255, 0);

取消a标签的个总样式

m0_62336925的博客

06-18

638

取消a标签的个总样式

安卓客户端a标签长按弹框提示解决办法

weixin_30542079的博客

12-28

203

昨天工作时候发现一个bug，是关于a标签的，在安卓客户端中，如果是a标签的话，长按会出现一个弹框，如图所示是因为安卓客户端的长按触发机制，以后进行wap端开发的时候，如果用到跳转页面尽量不要用a标签，取而代之可以用别的标签+onclick=“window.location.href='';”的方式。好久没有写博客了，最近在看工作流方面的东西和一些别的知识，比如orm，aop，sp...

【解决方案】禁止手机页面中A标签长按弹出路径框

Kuroko's Development Notes

07-31

2219

给a标签设置CSS： -webkit-touch-callout: none; ps：关于Label不可选中文本的css: -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Fi...

【愚公系列】《微信小程序与云开发从入门到实践》020-多媒体组件

热门推荐

时光隧道

09-07

5万+

在微信小程序的开发中，多媒体组件为应用增添了丰富的交互体验和视觉效果。无论是音频、视频，还是图片展示，这些多媒体元素不仅能够吸引用户的注意力，还能有效传达信息和情感。随着用户对内容质量和互动性的要求不断提高，掌握多媒体组件的使用显得尤为重要。本篇文章将深入探讨微信小程序中的多媒体组件，详细介绍每种组件的特性、使用方法和最佳实践。我们将展示如何通过这些组件实现动态的内容展示，提升用户的参与感和体验，同时分享一些实用的开发技巧和注意事项。

统信系统UOS桌面版V20 用户手册

Reyn_观极

07-27

1万+

UOS桌面版V20用户手册。

【Python】AppUI自动化—appium自动化元素定位、元素事件操作（17）下

墩墩分墩

11-10

2506

移动端a标签的默认事件

WongRu1的博客

02-07

1053

因为在项目中用到mui 使用ios时，无意间长按a标签会出现如下情况之前一直不知道原因何在，尝试用span标签发现不会出现这个弹框，最后发现是a标签的默认事件造成。在这里给a标签添加如下代码解决 M('body').on('touchstart', 'a.a', function(e) { e.preventDefault(); // 解决a标签长按出现菜单问

css 取消a标签的所有默认样式

PrimaryColor

01-20

8693

代码： /*去除a标签下划线*/ a { text-decoration: none; } /*去除未被访问的a标签的下划线*/ a:link { text-decoration: none; } /*去除已经被访问过的a标签的下划线*/ a:visited { text-decoration: none; } /*去除鼠标悬停时的a标签的下划线*/ a:hover { text-decoration: none; } /*去除正在点击的a标签的下划线（鼠标按下，尚未松开）*/ a:active

禁止手机页面中A标签长按弹出路径框

weixin_30905133的博客

12-25

153

//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCallout='none'; }; 转载于:https://www.cnblogs.com/wangjie-001/p/6219296.html...

移动端a标签点击背景变色

aydongzhiping的博客

10-23

3115

一、取消a标签在移动端点击时的蓝色 1 2 3 4 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none;

取消长按移动端Web页面，出现弹框

xuexizhe88的博客

05-29

2113

禁用图片弹框，给img标签加上 img{ pointer-events: none; //元素永远不会成为鼠标事件的target -webkit-user-select: none; -moz-user-select: none; -webkit-user-select:none; -o-user-select:none; user-sele...

移动端a标签点击背景色变蓝

泥猴桃的博客

11-23

1943

给a标签添加如下样式 a{-webkit-tap-highlight-color:transparent};

长按删除

兔老大的胡萝卜

08-09

885

我的比较特殊是ajax加载的标签需要长按删除 <img class='img' id="+data.result+" src=\"${ctx}/upload/"+data.filename+"\"/ style=\"height: 70px;width: 70px;\" ontouchstart=\"javascript:gtouchstart();\" ontouchmove=\"gtou...

如何将html中a标签长按颜色变化

10-19

要在HTML中实现链接（`<a>`标签）长按时颜色变化的效果，通常需要结合JavaScript和CSS。下面是一个简单的步骤说明： 1. 首先，在HTML中创建一个标准的`<a>`标签，并给它一个ID或其他唯一标识符以便于JS操作： ```html <a href="#" id="link" style="color: blue;">长按这里</a> ``` 2. 接下来，在CSS中设置初始样式，包括颜色，以及添加一个伪类`:active`表示鼠标正在点击或长按元素的状态： ```css #link { color: blue; } #link:active { color: red; /* 长按时的颜色 */ } ``` 3. 使用JavaScript监听`<a>`标签的长按事件（通常是通过touchstart和touchend或mousedown和mouseup，取决于设备支持）。当用户开始长按时，改变颜色并保持直到松开手指： ```javascript document.getElementById('link').addEventListener('touchstart', function(e) { this.style.color = 'red'; // 或者 'green'等其他颜色 }); document.getElementById('link').addEventListener('touchend', function() { this.style.color = 'blue'; // 回到原始颜色 }); // 对于非触屏设备，可以替换为： document.getElementById('link').addEventListener('mousedown', function(e) { this.style.color = 'red'; }); document.getElementById('link').addEventListener('mouseup', function() { this.style.color = 'blue'; }); ``` 4. 为了兼容性考虑，你还可以添加一个`setTimeout`函数来处理长时间未释放的情况，避免误触发： ```javascript let isTouching = false; function handleTouchStart(e) { isTouching = true; changeColor(); } function handleTouchEnd() { isTouching = false; setTimeout(function() { if (!isTouching) { resetColor(); } }, 500); // 假设用户在500毫秒内没有再次触摸，恢复原色 } // ...其他事件处理器中更新isTouching值 function changeColor() { this.style.color = 'red'; } function resetColor() { this.style.color = 'blue'; } // 其他事件处理器... ```