CSS 弹出窗口是否会随着触摸屏的普及而消亡？

Question

我正在设计一个网站（客户门户），将来可能会与移动/触摸屏设备一起使用。过去，我使用过这样的 CSS 代码：

div.Info
{
    display: inline;
    position: relative;
    text-decoration: none;
}

div.Info span.InfoDetail
{
    display: none;
}

div.Info:hover span.InfoDetail
{
    padding: 3px;
    display: block;
    position: absolute;
    top: 1em; left: 1em;
    border: 3px inset Gray;
    background-color: White; color: #000;
    text-align: left;
    white-space: nowrap;
    z-index: 25;
}

创建在鼠标悬停时显示的小 CSS 弹出窗口，它们似乎工作得很好。然而，我意识到这可能会或可能不会在触摸屏上工作，所以我想知道“正确”的行为是什么，因为我在有限数量的移动浏览器中发现似乎没有太多一致性能够看看。我查看了一下，似乎如果对象获得焦点，此悬停事件可能会激活，因此我在 http://mad-halfling.webs.com/testcode.htm 如果您将鼠标悬停在“鼠标悬停查看详细信息”文本或向上箭头的小图像上，则会显示一个小弹出窗口：-

• 在 iOS 上（我在一家商店找到了一个演示 iPad 来测试它），这似乎不起作用（我只尝试了文本，因为我刚刚添加了图像）
• 在我的 N900 上的 MicroB 上，点击文本和图像都会带来弹出窗口，
• 在 Firefox（我相信是 Fennec）上很好，在我的 N900 上点击任何一个都没有任何反应，

您对此有何看法 - 这似乎是一种耻辱，因为它是一种无需求助于 javascript 即可制作弹出窗口的有用方法，但如果它今后将无法使用触摸屏我将不得不重新考虑我的策略

干杯

MH

Answer 1

鼠标悬停的根本问题（包括将其用于桌面网站时）是没有 UI 指示行为。

这不是一个明确的答案，但我注意到，在您现在在移动设备上使用“鼠标悬停”的地方，您可以使用“长按”。但问题是用户界面上没有任何内容表明该行为。 （公平地说，没有任何指示的 UI 约定已经存在了一段时间，例如双击）。

经验法则可能仍然应该是，就像鼠标悬停一样，关键功能不应该需要它们。

Answer 2

为什么不在您想要弹出窗口的任何地方放置一个圆圈中的问号图像（这似乎是常见的习惯用法），并且具有 onhover 和 onclick 功能来显示您的文档？