Html iPhone上的触摸菜单&x2013；是否可以通过使用简单的标记，合并：hover状态来实现？

今天我发布了一个WordPress博客，我花了很多时间来为它开发主题。现在，这是我第一次通过iPhone申请该网站，我感到震惊。我认为通过编写简单的HTML并利用悬停状态来显示或不显示其内容，实现触摸菜单将是一项简单的任务

如果您将浏览器切换到移动用户代理并加载（之前将窗口设置为640px宽），您将看到我的浅蓝色小部件栏。将鼠标悬停在上面的图标上，将切换带有主要小部件内容的内部容器-工作起来很有魅力

---

不幸的是，当我在iPhone上调用该站点时，会出现带有图标的栏，但根本无法触摸。该死我的代码怎么了？我希望你能帮助我。提前感谢

以下是我在iOS中发现的悬停功能。这也许能解决你的问题。或者其他人

---

“使用规则-webkit转换：所有0.3都易于输入输出；（可能还有其他）原地iOS不会悬停，除非您添加display:none/display:block或display:table/display:block。此外，我发现，如果没有悬停代码，如果href中确实有一个目标链接，单击它，它只会启动到该链接。代码就位后，您单击一次悬停事件，然后再单击一次w链接。因此，如果您发现iOS设备由于任何原因无法（或无法正确）悬停，这里可能是您的解决方案。”

现在我发现，在发布此问题时，我永远无法让它以我想要的方式工作（很抱歉，链接不再显示）。说明：我的标记类似于：

<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容器

永远不能被触摸，因此它的

：hover

-状态永远不会被触发

---

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

谢谢，但我根本没有为这些解决方案设置转换。。。他说的后者正是促使我只依赖HTML/CSS而不是js:-）再次感谢，因为最近这让我重新思考了我对触摸设备悬停状态本质的看法！