iPhone Safari IOS系统不兼容 :hover 的解决方法_前端技术

资料来源：网络整理时间：2023/3/4 0:55:58 共计：3586 浏览

今天有一个zblog模板客户反馈问题，手机端菜单在苹果手机上下拉失效，安卓机子上正常，看了一下，使用的是:hover的方法，没有使用任何JS。

我自己也没有苹果机子可测试，最终百度中找到iphone无法兼容:hover的原因！

方法一：

a:hover 设置的样式在iOS系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

代码如下：

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

或者给body添加ontouchstart

<body ontouchstart>

方法二：

既然iphone不支持hover，用js解决，写一个单独的类，比如.active

.active{    background-color: #eee;}123123

/*****************
在鼠标进入li的时候
1. 去除其它`li`的 `.active`
2. 给当前`li`添加类`.active`
********************/
$(function(){
    $('ul li').mouseover(function(){
        $('ul li').removeClass('active');
        $(this).addClass('active')
    })
})

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS：左侧栏固定宽度，右侧栏自适应宽度_CSS学习 | ·下一条：背景透明、文字不透明最简单的CSS方法 - background-color:rgba(229,52,51,0.75);_CSS学习