2021年11月2日

mac/iphone等设备safari不支持hover-out解决方案


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

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

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

参考资料

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

标签:, , , ,

微信扫一扫二维码访问