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创建了一些测试代码，如果你鼠标悬停在“鼠标悬停在细节上”文本，它会显示一个小弹出窗口或者小小的向上箭头图像： -

（我在商店里发现了一个试验iPad来测试它）这似乎不起作用（我只尝试了文本，因为我刚刚添加了图像）
在我的N900上的MicroB上，点击文本和图像都会弹出，很好
（我相信它是Fennec）在我的N900上点击或者什么都不做

你对此有何看法 - 这似乎是一种耻辱，因为它是一种制作弹出窗口而不必诉诸javascript的有用方式，但如果它不能用于触摸屏，我将不得不重新思考我的策略

干杯

MH

Answer 1

鼠标悬停的基本问题，包括用于桌面网站的问题，是没有UI指示的行为。

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

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

Answer 2

为什么不在任何你想要的弹出窗口附近有一个问号的圆圈（这似乎是常见的习语），并且有没有onhover和onclick功能来显示你的文档？

CSS弹出窗口是否会因触摸屏变得越来越多而死亡？

2 个答案: