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

デスクトップ Web サイトで使用される場合を含め、マウスオーバーの基本的な問題は、動作の UI 表示がないことです。

これは決定的な答えではありませんが、モバイルデバイスで「マウスオーバー」を使用する場所で「ロングタッチ」を使用できることに気付きました。ただし問題は、UI にその動作を示すものがないことです。(公平を期すために、ダブルクリックなど、表示のない UI 規則はしばらく前から存在していました)。

マウスオーバーと同様に、重要な機能ではマウスオーバーを必要とすべきではないというのが、おそらく経験則です。

于 2011-04-21T22:58:17.173 に答える
0

ポップアップを表示したいものの近くに円で囲まれた疑問符の画像 (一般的なイディオムのようです) を配置し、ドキュメントを表示するためのオンホバーおよびオンクリック機能を持たせてみませんか?

于 2011-04-21T23:04:01.297 に答える