2011-01-31 4 views
2

私は様々なモバイルデバイスでツールチップを動作させる方法を試しています。残念ながら、私がサポートする必要があるデバイスの範囲は、NokiasからiPhoneまでの範囲です。どのようなiPhone(モバイルサファリ)がcss:hover疑似クラスで何をするのかを決めるには?

私が扱っているブラウザの中には、フォーカスのあるツールチップのtitle属性の使用をサポートしていないものがあります。このように、私は別の解決策を考え出す必要があります。手始めに

、私は純粋なCSSツールチップと一緒に遊んだ:http://psacake.com/web/jl.asp

この方法は使用しています位置に疑似クラスを置いて、ツールチップを作成するために、SPANのzインデックスを設定します。

iPhoneでは、これが奇妙な副作用を引き起こしました。リンクをタップするとツールヒントが公開され、実際にリンクをアクティブにするには2回目のタップが必要です。

ただし、単純なスタイルを別のリンクの:ホバー擬似クラス(背景色を変更する)に適用しても、同じ効果はありません。 1回タップするとスタイルとリンクの両方がトリガーされます(次のページが読み込まれる前に:ホバースタイルが短く表示されます)。

iPhone(および私が使用しているNokia製のタッチデバイス)によってトリガされないように見える:focus擬似クラスを使用して、モバイルデバイスのこの問題を解決しました。もちろん、このアプリがデスクトップブラウザでも使用されるのであれば理想的ではありません。

質問:iPhoneのSafariブラウザが、リンク上でクリックイベントを中断して:ホバー擬似クラスを公開することを決定したときと、割り込みを行わずにリンクを開始させるときのロジックについては文書化されていますか?最初のタップ?

答えて

1

アップルのドキュメントでリンクを見つけようとしていましたが、私が見つけた最も特有のものがありました。ホバーはエミュレートされており、予期しない結果を引き起こす可能性があります。ユーザーがオブジェクトをタップして保持している場合にのみ表示されると言った場所が1つ見つかりました。 That page(下部にある「サポートされていないiOSテクノロジを使用しない」)は、通常のツールチップ(タイトル属性を使用)が表示されることを示しています。

スタイルを変更してツールチップを表示する動作が異なる理由を前提にすると、mousemoveイベントの処理方法に似ていると思います。このHandling Eventsページによれば、mousemoveイベント中にページの内容が変更された場合、チェーン内の残りのイベント(マウスアップを含む)は送信されません。私はこの動作もホバーに適用されると仮定しています。 display: noneを使用してツールチップを隠している場合は、代わりにvisibility: hiddenを使用してみてください。「オブジェクトはここにありますが、見ることはできません」と解釈されます。

関連する問題