关于苹果端（iphone）浏览器（safari）不支持：hover解决方案

我是阿木吖

于 2023-12-18 19:28:31 发布

阅读量580

点赞数 9

文章标签： iphone safari ios

本文链接：https://blog.csdn.net/qq_67388028/article/details/135069880

版权

在一个响应式切图项目中遇到的问题，这本是一个经典的侧边栏效果，鼠标hover的时候拉出来详细的信息，因为是适配手机的，但是在iphone下出现了问题，当点击侧边栏的某一个的时候，可以正常的拉出来信息，但是却不能收缩回去了。这个也很好理解，因为手机下只有触摸事件，并没有hover（移上去）事件。

于是想到了阻止冒泡等方法，最终都没能完美地解决，而在查了国内资料无果，再次查阅国外资料的时候找到了解决方案，并且非常的简单：只需要给html元素添加ontouchmove属性就可以了。

如果有经常看一些国外优秀的模板案例的时候，可以经常看到这一句话 <html ontouchmove> ，而给html加上 ontouchmove就是为了解决iphone等设备下safari浏览器不支持hover的。

参考资料

https://dev.webonomic.nl/fixing-the-iphone-css-hover-problem-on-ios

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我是阿木吖

关注关注

9
点赞
踩
7

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

iphone safari不支持position fixed的解决方法

09-05

然而，苹果的iPhone Safari浏览器在早期版本中并不完全支持这个属性，尤其是在处理滚动事件时会出现问题，导致元素在滚动时无法正确保持其固定位置，这给开发者带来了一些挑战。为了解决这个问题，开发者通常需要...

移动端 Safari 踩坑记录

事非宜，勿轻诺；苟轻诺，进退错。

02-01

568

移动端 Safari中:hover导致的两次点击问题问题描述：在移动端的Safari中，如果使用了:hover会导致两次点击事件的发生，如a标签链接到一个新地址，如果a标签使用了:hover就会造成第一次点击时响应:hover，第二次才响应a标签的跳转。 解决方案： 1. 监听`ontouchstart`事件给body添加一个`no-touch`的class，用于限制`:hover

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

苹果手机无法识别hover，click事件的触发需要双击的问题

ECHO陈文的博客

04-15

1744

今天在做手机端页面切图的时候发现苹果手机无法识别hover，后来度娘了一下，原来ios是将hover事件默认为click事件来处理的所以就只能判断喽，也许会有别的办法，先记录下吧判断访问终端，如果是手机的话，就没有 hover 样式，如果是电脑的话，就显示hover 样式这样就解决喽 ...

ios 里面hover的兼容问题

Allen-Ye博客

03-24

839

最近在做手机端跟pc端一套代码自适应的，用的是@media，手机端是用rem，正常我们写样式会用到hover这个css，可是在ios就会出现兼容问题，今天刚好解决了，随便记录下 a:hover 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 1、js代码document.bo...

解决ios出现hover和click事件，click事件的触发需要双击的问题

gll77

03-26

4822

由于ios是将hover事件默认为click事件来处理，可通过js判断当前设备是移动端还是pc端，若是pc端则添加一个css类并设置hover样式，若是移动端，则无hover样式。代码如下：相关链接：点击打开链接...

解决a标签hover在移动设备点击两次才跳转

lu900618的专栏

11-02

1742

/* 解决移动设备 hover 二次点击 */ $(function () { $('a').on('click touchend', function (e) { var el = $(this) var link = el.attr('href') window.location = link }) })

IOS需要点击两次才出发点击效果

m0_70511264的博客

11-25

834

IOS需要点击两次才出发点击效果

苹果iPhone safari浏览器样式重置修复submit按钮圆角bug

01-19

大家刚接触写手机页面或许都会遇到的修复iPhone的safari浏览器上submit按钮圆角bug 修改前：修改后：在CSS中加复制代码代码如下: -webkit-appearance: none; 便可以解决。

iphone的safari浏览器中实现全屏浏览的方法

09-04

在iPhone的Safari浏览器中实现全屏浏览可以让用户在查看网页内容时获得更沉浸式的体验。通常，Safari浏览器在浏览网页时会显示顶部的工具栏和底部的标签页栏，这占据了屏幕的一部分空间。全屏浏览则可以隐藏这些元素...

苹果浏览器 Safari(苹果浏览器) v5.34.57.2

12-15

Safari(苹果浏览器)是Apple发布较快Windows平台浏览器，根据Apple所说，针对Windows平台的Safari浏览器，Apple Safari(苹果浏览器)是目前在windows平台上速度较快的浏览器，业界标准iBech测试显示，

事件类型—鼠标事件

雷雨天的雷胖子

05-14

5547

目录一、事件分类二、事件顺序三、事件对象坐标属性修改键属性 relatedTarget属性 button属性四、事件应用一、事件分类鼠标事件共有11种类型，分别是click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave和onmou...

iPhone Safari 不兼容 :hover 的解决方法

学习笔记

11-17

5902

不支持hover，用js解决，写一个单独的类，比如.active.active{ background-color: #eee; }/***************** 在鼠标进入li的时候 1. 去除其它`li`的 `.active` 2. 给当前`li`添加类`.active` ********************/ $(function(){ $('ul l

ios hover problem【iphone和ipad hover态不消失问题】

wxyoo1 的技术人生

03-05

3918

【iphone和ipad hover态不消失问题】ios hover problem

关于ios上点击事件触发经过导致layui nav跳转的bug

alxe46144的博客

11-22

139

在ios上点击事件其实是第一下触发的hover事件，第二次点击才是触发click事件；在用layui 的nav菜单，它的跳转是通过click事件触发的，所以在ios上就会出现，页面跳转需要点击两次才能触发；解决办法：监听touch事件，如果有跳转就手动触发跳转，如果有点击事件就执行点击事件；已测试有效 $("a").on('touchend', function(e) { ...

iOS开发笔记之多点触控（一）处理触摸的4个方法

Marvindev(移动开发)

01-13

2132

多点触控乃苹果公司带给世界的创新之首，作为移动开发者，熟练掌握多点触控开发技能很有必要。处理触摸的四个方法： -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event //首次在屏幕上检测到触摸时调用 { NSLog(@"touchesBegan"); } -(void)touchesM

移动端 H5 相关疑难总结

渣渣宇的博客

02-03

1072

本文主要讲解关于移动端H5页面内的一些小操作、与app之间的交互注意事项 A. 本文提及的安卓系统包括Android和基于Android开发的系统 B. 本文提及的苹果系统包括iOS与iPadOS C. 本文内的大部分内容都是适应绝大多数浏览器的，所以除去某些偏门操作不用担心兼容问题 D. 本文是针对移动端浏览器的，所以下文提到的浏览器均为移动端浏览器，PC上不一定会有效 HTML 调用系统功能使用 < a > 能快速调用移动设备的电话/短信/邮件三大通讯功能使用 < input

关于碰到在苹果手机上的兼容相关问题【部分】

zilvzsy的博客

09-23

419

记笔记，免忘记！方便之后自己碰到相同问题的时候查阅！后面碰到其它会补充。语言组织能力可能不太好，请各大神指正！一：:hover在ios上无效（包含但不限于:active :focus）等 //解决方案一：js绑定事件 document.body.addEventListener('touchstart',function(){}); //解决方案一：body添加ontouchstart &...

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