如何 a:hover伪类在ios移动端浏览器内无效的解决方法

最新推荐文章于 2024-01-17 18:57:40 发布
最新推荐文章于 2024-01-17 18:57:40 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhooson/article/details/105230932
版权

原因： &:hover 的样式的在ios中是显示不出来的，安卓的可以显示出来

方案：需要在按钮元素或body/html上绑定一个touchstart事件才能激活为:active状态。

方法1

document.body.addEventListener('touchstart',function(){});

方法2（推荐）

<body ontouchstart>
zhooson
关注
专栏目录
如果是在手机上查看投票页，没有HOVER效果时应该怎么办？
IT修真院：初学者转行到互联网的聚集地
05-29 471
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【如果是在手机上查看投票页，没有HOVER效果时应该怎么办？ 】 大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下，在手机上没有HOVER效果时...
十五、less语法、移动端浏览器及内核分析、viewport、移动端适配方案、移动端重置样式、移动端特殊处理、移动端其他适配方案设备像素、独立像素和css像素、
qq_52426181的博客
12-05 405
一、less语法 1、注释 less共有两种注释风格。 标准的CSS注释，多行注释 /* comment */ ，会保留到编译后的文件。 单行注释 // comment，只保留在less源文件中，编译后被省略。 // 单行注释，这种只会在less文件中存在，不会编译到css里面去 /* 注释内容，可以被编译到css文件中去的 */ 2、导入 @import "导入文件的地址"; .css 后缀名不能省略，引入 .less 文件可以省略扩展名 3、变量 定义 @变量名:值; 使用 ​
hover不生效没有效果的解决办法
lishuaihao的博客
10-11 2394
css的hover易错点当hover后面跟的是兄弟元素的时候一定要加+号当hover后面跟的是儿子元素的时候则不需要加 当hover后面跟的是兄弟元素的时候一定要加+号 当hover后面跟的是兄弟元素的时候一定要加+号 我花了好几分钟以为是代码写错了，一直不出效果，谁知道没有加+号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
伪类在ios移动端浏览器内无效的解决方法
烟火的博客
11-27 2077
伪类在ios移动端浏览器内无效的解决方法a:active 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 document.body.addEventListener('touchstart',function(){},false);
移动端ios:active伪类无效的兼容解决方案
Alde_baran的博客
12-22 1844
苹果手机浏览页面中设置的css伪类：active失效。查找资料发现要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主
移动端hover样式不消失&ios系统伪类:active不生效
CYL_2021的博客
12-15 1434
hover 匹配用户鼠标悬停状态。还有个和hover功能相同的any-hover语法一样作用也是一样的，唯一的区别就在于any-hover是检测任意的输入装置，而hover只检测主要的输入装置。注：IE浏览器下，@media (any-hover: hover) Edge16才支持，hover媒体查询，可以兼容到Edge12。
移动端网页解决CSS的active伪类无效的方法
09-24
然而，有时候在某些移动端浏览器，特别是iOS设备上，`:active`伪类可能会表现得不正常或者完全无效。本文将深入探讨这个问题并提供解决方案。 `:active`伪类通常用于给链接、按钮等元素添加一种临时的视觉反馈，...
网易高工手打：中高级前端必须注意的40条移动端H5坑位指南
pig_html的博客
02-03 819
前言 不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。 三年半沉淀通过本文记录下所遇到的坑位，或许有些坑位还未遇到，但本文记录的40条坑位绝对能让同学们少走很多弯路，特别是前端小白。为了减少废话提高本文质量，对以下内容做一些约定。 提及的安卓系统包括A
如何自己实现一个 Button，它在PC端有常态、Hover态、Active态，在移动端没有Hover态
小王的技术库
05-09 1227
Button在PC端的3种状态 在PC端，如果你想自己实现一个让用户体验好的Button，至少需要设置3种状态的样式： 常态 Hover态 Active态 （当然，你可以视情况增加其它状态，例如Disabled态、Loading态） 拿ant design举例子，介绍下3种状态： 常态 Hover态（光标悬浮在按钮上） 这种状态，通常的设计规范是：元素亮度比常态高。且鼠标是手形。（目的是突出展示鼠标停留的元素，避免点错按钮） Active态（光标左键按下按钮并保持按住） 这种状态，通常的设计规范是：
hover效果失效的原因
continue_y的博客
06-25 625
当我们给元素设置了这个点击事件和移入事件的同时, 当使用的了点击事件之后可能移入事件会失效,简单的办法就是给hover加上!
移动端:active,:hover无法很好触发动画的解决方案
w36680130的博客
08-07 181
移动端:active,:hover无法很好触发动画的解决方案
ios ：cative伪类无效问题
tanghaha01的博客
03-08 184
<button v-on:touchstart="() => {}" class='btn-wrapper' @click="play()"></buton> 加上v-on:touchstart="() => {}" 或者：document.body.addEventListener('touchstart',function(){});
兼容移动端:hover
weixin_44502231的博客
01-25 2488
场景： （react实例） 对于一个列表，加上选中高亮样式： 1. pc端，鼠标滑过高亮 2. 移动端，点击div任意位置，整行高亮 问题描述： 在移动端，:hover属性生效了（黑色的边框border），如图： 原因分析： 在移动端，:hover的优先级高于class，如上图，最终的border颜色是黑色，而不是橘黄色。:hover被解析成click（mousedown）了；默认的click则是mouseup触发，效果如下图： 解决方案： 通过js的navigator.userAgent获取浏
hover移动端
zsq199771的博客
06-07 292
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好的体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，那么正好分享一个激活css的active效果，代码如下 let ele = document.getElementsByClassName(‘el-slider__button-wrapper’) console.log(ele[0]) ele[0].ontouchstart = function(){ console.log(‘触摸开始’) } ele[0].on
ios 不兼容 :hover 问题
sssuuuunnn的博客
03-09 419
a:hover 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 方法一、js 用法 document.body.addEventListener('touchstart',function(){}); 方法二、body标签 <body ontouchstart></body> ...
移动端实现hover效果
weixin_42835782的博客
04-13 2849
document.body.addEventListener(‘touchstart’, function(){ });加上这行代码，空函数就行 然后：hover改成：active，实现PC端hover效果
ios 里面hover的兼容问题
Allen-Ye博客
03-24 848
最近在做手机端跟pc端一套代码自适应的，用的是@media，手机端是用rem，正常我们写样式会用到hover这个css，可是在ios就会出现兼容问题，今天刚好解决了，随便记录下 a:hover 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 1、js代码document.bo...
移动端 hover 问题处理
最新发布
一曲红尘诀
01-17 1251
移动端 hover 问题处理, 和 pc 端公用样式时
JS实现css的hover效果，兼容移动端
砷碲 - Shendi
03-07 6011
CSS的hover即触碰时触发，在电脑端鼠标触碰，移动端手指触摸有的时候光靠css实现不了一些效果，例如元素触发hover，其他元素触发动画效果，所以需要使用到js。
:hover伪类选择器
10-21
:hover伪类选择器是CSS中的一种选择器，它可以在用户将鼠标悬停在一个元素上时应用样式。这个选择器可以用于任何可交互的元素，例如链接、按钮、表单元素等等。当用户将鼠标悬停在元素上时，可以改变元素的颜色、背景色、边框等等。使用:hover伪类选择器可以增强用户体验，使页面更加动态和交互性。例如，当用户将鼠标悬停在一个链接上时，可以改变链接的颜色，以提示用户该链接可以被点击。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值