首页 文章

iPhone上的触摸菜单 - 可以通过简单的标记实现，并结合：悬停状态？

提问于
浏览 次
0

今天我推出了一个WordPress博客，花了我很多时间来开发主题 . 现在这是我第一次通过iPhone请求该网站我感到震惊 . 我认为通过编写简单的HTML和样式来实现触摸菜单是一项简单的任务，它利用了：hover-state来显示或不显示它的内容 .

如果您将浏览器切换到移动用户代理并加载this site（使窗口宽度大约为640px），您将看到我的浅蓝色小部件栏 . 将鼠标悬停在其上的图标上将使用主要小部件内容切换内部容器 - 就像魅力一样 .

不幸的是，当我在iPhone上调用该网站时，带有图标的栏会出现，但根本不可触摸 . 该死的！我的代码出了什么问题？我希望你能帮助我 . 提前致谢

html css hover touch mobile-safari

2 回答

  • 0

    这是我在iOS中悬停时发现的 . http://www.websitecodetutorials.com/code/iPhone-&-iPad/apple-iPhone-iPad-IOS-simulate-hover.php . 它可能是你的问题的解决方案 . 或其他人在路上 .

    “使用规则-webkit-transition：所有0.3s缓入;（可能还有其他）就位iOS除非你添加display：none / display：block或display：table / display：block，否则不会悬停 . 我发现，如果你没有悬停代码，如果你真的在href中有一个目的地链接，点击它之后，它就会启动它 . 如果代码到位，你点击一次悬停事件，再过一次关注链接 . 所以，如果你发现iOS设备不会（或正确地）悬停，无论出于何种原因这是你的可能修复 . “

    回复于
  • 0

    现在我发现在发布这个问题时我从来没有按照我想要的方式工作（对不起链接不再显示它） . 说明：我的标记如下：

    <li class="widget-container">
    <p class="widget-title">Categories</p>
    <div class="widget-content">
        <ul>...</ul>
    </div>
</li>

    风格如下：

    .widget-content                         {display:none}
.widget-container:hover .widget-content {display:block}

    我有充分的理由：在触摸设备上，触摸操作始终以z-index中的最高对象为目标，在此示例中为 .widget-title . 因此，永远不会触及包装 .widget-container ，因此永远不会触发 :hover -state .

    这个练习使我认识到一个触摸屏优化的网站必须结合JavaScript才能运作良好 . 所以我现在想出了一个jQuery手风琴解决方案 .

    回复于

相关问题