关于IOS伪类:hover的问题

近期项目突然遇到导航在iPad上面无法弹出二级菜单的现象,这个BUG让我纠结了好久,因为以前都没遇到过,后来回想下,是不是iPad这些由于触屏的原因,并没有:hover伪类这个效果!经过我几次测试,终于发现BUG所在之处,以及对iPad这些触屏产品有了新的了解。

:hover 在W3C里介绍表示鼠标经过状态,大部分情况下,用于文字连接,在iPad表现为用户点击连接的状态,这里注意的是,根据我的观察,在PC上面鼠标的经过事件(包括JS和CSS),在iPad都表现为用户触摸点击。

表现为点击,那么按照正常的思维,我点击导航,应该会出现二级菜单(JS没问题,但是用CSS伪类li:hover去写的时候出现问题),后来经过我测试,发现,导航如果有a的连接标签(需求方要求这次导航没有连接,无奈啊),那么二级菜单会出现,如果把a标签换成了span,则不会出现。

BUG是解决了,但是原因何在呢?查阅资料也没有特别好的说服,根据我观察,我大胆的猜测,iPad会:hover的处理,应该是点击获取焦点(即 :focus),因为改成span后,li标签不会获得焦点,改成a标签后,焦点停留在a标签上,a标签属于li标签的子元素,即停留在li标签上,于是弹出二级菜单。当然,这个只是我的猜测,若其他同学有任何相关资料,请告知..感激不尽…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值