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

老白 9个月前 1307浏览 0评论

今天有一个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')
    })
})

 

发表评论