解决ios不支持按钮:active伪类的方法

最新推荐文章于 2023-12-15 16:28:15 发布

dingbenji5337

最新推荐文章于 2023-12-15 16:28:15 发布

阅读量194

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/saysmy/p/7999947.html

版权

mozilla开发社区上有 :active 不起作用的答案：

[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.

在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

document.body.addEventListener('touchstart', function () { //...空函数即可 });

将上述事件监听代码加上后，Safari Mobile上就可以看到按钮按下后的切换效果了。

转载于:https://www.cnblogs.com/saysmy/p/7999947.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dingbenji5337

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

ios客户端按钮添加按钮点击态无效解决方案

xd_yangxiaoromg的博客

03-31

603

有的时候，设计会要求给H5页面，点击的按钮增加点击态，一看，这其实是个很简单的需求，给点击的按钮加上-webkit-tap-highlight-color的css属性即可： -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); cursor: pointer; 加完之后电脑上妥妥的，没有问题，但是在不同的手机上会有差异，比...

jQuery仿IOS开关按钮特效

04-25

通常会使用伪类`:checked`来控制按钮在选中和未选中状态下的样式差异。最后，利用jQuery来处理按钮的点击事件，实现动画效果。这通常涉及改变元素的`class`、`style`属性，以及可能的过渡动画。例如，当用户点击...

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

使用伪元素无效

weixin_42645102的博客

11-11

1231

使用伪元素无效今天使用伪元素 ::after 一直没有效果，确定写了content并且没有拼错单词。反复检查都没有效果，最后复制正确的代码对比，发现问题出在::after前有个空格。 li ::after /*错误*/ li::after /*正确*/ ...

:after等伪元素无效

流都的博客

05-17

1万+

♦ 伪元素如果没有设置“content”属性，伪元素是无用的#example:before { 2. content: ""; 3. display: block; 4. width: 100px; 5. height: 100px; 6.} ♦ 你也许注意到，你也可以用两个冒号(::before 和 ::after) 写伪元素，这个我以前讨论过的。简短的...

伪元素不生效问题，比如：：affter

m0_61177996的博客

08-15

1114

伪元素不生效问题，比如：：affter

ios按钮添加点击:active效果不生效

qq_43639075的博客

05-23

1161

移动端开发的时候实现按钮的点击样式变化，但是在iphone下没有效果显示。原因是在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。方法一： document.body.addEventListener('touchstart',function(){}); 方法二： <body ontouchstart="" on...

移动端hover样式不消失&ios系统伪类:active不生效

最新发布

CYL_2021的博客

12-15

1397

hover 匹配用户鼠标悬停状态。还有个和hover功能相同的any-hover语法一样作用也是一样的，唯一的区别就在于any-hover是检测任意的输入装置，而hover只检测主要的输入装置。注：IE浏览器下，@media (any-hover: hover) Edge16才支持，hover媒体查询，可以兼容到Edge12。

移动端网页解决CSS的active伪类无效的方法

09-24

// 空函数即可，目的只是为了触发:active伪类 }); ``` 这个简单的JavaScript代码片段将确保在iOS设备上，`:active`伪类的样式能够正确地在元素被触摸时显示。这样做不仅解决了`:active`无效的问题，而且相比于使用...

ios下载按钮css3动画特效

04-06

在实现iOS风格下载按钮时，我们可以利用CSS3中的伪类选择器，如`:hover`、`:active`和`:focus`，来改变按钮在不同状态下的样式。例如，当用户鼠标悬停、点击或焦点在按钮上时，可以改变按钮的颜色、边框等属性，提供...

a:active在ios上无效解决方法

weixin_30872157的博客

10-16

207

原因： By default, Safari Mobile does not use the :active state unless there is atouchstart event handler on the relevant element or on the <body>. 解决方法： 1.body标签上添加ontouchstart空方法（页面首个元素起作用） ...

IOS系统不支持伪类active效果

从零出发

01-14

674

IOS系统不支持伪类active效果问题描述：在手机端网页中，设计了按钮、标签点击时的active效果，但是IOS端没有效果；解决方案：diamante如下 <body ontouchstart="" onmouseover=""></body> 总结：给body标签添加ontouchstart与onmouseover事件即可；亲测有效…… ...

H5嵌入原生开发小结----兼容安卓与ios的填坑之路

精选资讯文章

06-07

1427

一开始听说开发H5，以为就是做适配现代浏览器的移动网页，心想不用管IE了，欧也。到今天，发现当初too young too simple，兼容IE和兼容安卓与IOS，后者让你更抓狂。接下来数一下踩过的坑。主要分UI展示，键盘，输入框等等。解决bug最苦恼的问题不是没有解决方案，而是你没有找到真正的原因。再就是现象难以重现，每次都要发布代码，然后到手机app中去测试，模拟。这些地方会耗费大量的精力。

解决active在苹果手机上失效的问题

lqx_520的博客

12-19

1893

active在苹果手机上失效的解决办法：在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。要让css的:active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 Use the :active pseudo-class in your css, then add onto...

移动端ios中active无效

糖果云专栏

09-11

906

方法一：body添加ontouchstart <body ontouchstart=""> 方法二：js给 document 绑定 touchstart 或 touchend 事件 <style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >b...

移动端a:active,button:active失效，解决办法！

Eling

03-17

1731

移动端a:active,button:active失效，解决办法！ a:active,button:active在PC端效果正常，但是在移动端的IOS机型上点击失效。解决办法：在body或者按钮上加上touchstart事件即可。代码如下： document.body.addEventListener('touchstart',function(){// 空函数就可以},false)

移动端ios:active伪类无效的兼容解决方案

Alde_baran的博客

12-22

1843

苹果手机浏览页面中设置的css伪类：active失效。查找资料发现要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主

移动端:active伪类无效的解决方法