0

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

如果您将浏览器切换到移动用户代理并加载此站点（之前将窗口设置为大约 640 像素宽），您将看到我的浅蓝色小部件栏。将鼠标悬停在其上的图标上将切换内部容器与主要小部件内容 - 就像一个魅力。

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

4

2 回答 2

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 手风琴解决方案。

于 2013-09-19T12:16:37.557 回答
0

这是我在 iOS 中使用鼠标悬停时发现的。http://www.websitecodetutorials.com/code/iPhone-&-iPad/apple-iPhone-iPad-IOS-simulate-hover.php。这可能是解决您的问题的方法。或者其他人在路上。

“使用规则 -webkit-transition:all 0.3s ease-in-out;（可能还有其他）iOS 不会悬停，除非您添加 display:none/display:block 或 display:table/display:block。此外我发现，如果没有悬停代码，如果您在 href 中确实有一个目标链接，单击它时，它就会直接启动它。有了代码，您单击一次悬停事件，然后再单击一次跟随链接。因此，如果您发现 iOS 设备由于某种原因无法（或正确）悬停，这可能是您的解决方法。

于 2013-09-16T14:51:31.727 回答