您的位置:首页 > 移动开发 > IOS开发

关于IOS伪类:hover的问题

2012-08-19 23:12 423 查看
近期项目突然遇到导航在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标签上,于是弹出二级菜单。当然,这个只是我的猜测,若其他同学有任何相关资料,请告知..感激不尽…
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: