2

我正在设计一个站点（客户门户），将来可能会与移动/触摸屏设备一起使用。过去我使用过这样的 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

4

2 回答 2

2

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

This isn't a definitive answer but I've noticed that in places where you would be using "mouseover" now on a mobile device you can use "long touch". The problem though is that nothing on the UI indicates that behavior. (To be fair UI conventions that have no indication have been around for a while, like double clicking).

The rule of thumb probably should still be that just like mouseovers, critical functionality shouldn't require them.

于 2011-04-21T22:58:17.173 回答
0

Why not have a image of a question mark in a circle (which seems to be common idiom) near whatever you'd like a popup for, and have that have onhover and onclick functionality to display your documentation?

于 2011-04-21T23:04:01.297 回答