V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
fim8
V2EX  ›  程序员

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

  •  
  •   fim8 · 2014-08-20 23:21:46 +08:00 · 4596 次点击
    这是一个创建于 3772 天前的主题,其中的信息可能已经有所发展或是发生改变。
    iPad和iPhone都测试过。

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

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

    求解救,脑子已经糊住了。
    5 条回复    2014-08-22 09:20:17 +08:00
    jucelin
        1
    jucelin  
       2014-08-21 08:03:31 +08:00 via Android
    我手上的CSS2.0开发文档中有说明,a要加href才会出发hover。建议看看文档。
    为了兼容,可以使用href="JavaScript:void(0)"。
    bsbgong
        2
    bsbgong  
       2014-08-21 09:10:57 +08:00
    除了楼上之外
    说个别的:既然不用href属性,为什么要用a标签?
    html标签是有语义的。再考虑到各浏览器自身的css reset,你为一个没有href的a标签指定css的时候会比较麻烦。
    不知道你是不是有其他的原因而选择这样使用。像这种情况,我觉得用<div>或<span>更好
    bsbgong
        3
    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
        4
    ximan  
       2014-08-21 14:42:21 +08:00
    标题上的疑问:iPhone、iPad要hover做什么?不是只有active么?
    fim8
        5
    fim8  
    OP
       2014-08-22 09:20:17 +08:00
    结论是 ,ios上的webkit浏览器,只有a标签才可以使hover生效,其他标签如div,需要用javascript绑定点击事件才可以。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3222 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:36 · PVG 20:36 · LAX 04:36 · JFK 07:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.