一个奇葩问题纠结了一晚上:ios 中 safari 浏览器下 hover 的问题。

2014-08-20 23:21:46 +08:00
 fim8
iPad和iPhone都测试过。

结果是必须a标签且有href属性才可正常显示hover,但当前项目有其他代码或其他网站用其他tag如div也可以hover。这显然是不合理的。问题到底是出在哪里?

http://jsfiddle.net/iamtaotao/3khfenbd/3/
如测试中第一个div在ios下的safari中就无法实现。

求解救,脑子已经糊住了。
4517 次点击
所在节点    程序员
5 条回复
jucelin
2014-08-21 08:03:31 +08:00
我手上的CSS2.0开发文档中有说明,a要加href才会出发hover。建议看看文档。
为了兼容,可以使用href="JavaScript:void(0)"。
bsbgong
2014-08-21 09:10:57 +08:00
除了楼上之外
说个别的:既然不用href属性,为什么要用a标签?
html标签是有语义的。再考虑到各浏览器自身的css reset,你为一个没有href的a标签指定css的时候会比较麻烦。
不知道你是不是有其他的原因而选择这样使用。像这种情况,我觉得用<div>或<span>更好
bsbgong
2014-08-21 09:14:11 +08:00
anyway,对于a标签的hover,确实有要注意的地方。那就是hover, visited, activate属性。
在设置这几个属性时,要注意顺序问题。否则你有可能会遇到点击链接一次之后,hover属性就不再起作用了。
顺序:visited, hover, activate。比如
a
&:visited
color blue
&:hover
color red
ximan
2014-08-21 14:42:21 +08:00
标题上的疑问:iPhone、iPad要hover做什么?不是只有active么?
fim8
2014-08-22 09:20:17 +08:00
结论是 ,ios上的webkit浏览器,只有a标签才可以使hover生效,其他标签如div,需要用javascript绑定点击事件才可以。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/129056

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX