ホバー状態のiPad / iPhone代替
最近、CSS3とjQueryの魔法を使って個人のポートフォリオを更新しました。結果に非常に満足しています。もちろん、完全に応答性があります。しかし、私には問題があります。ポートフォリオアイテムを構造化して、最初に各アイテムボックスにオーバーレイを配置しました。ユーザーがアイテムにカーソルを合わせると、オーバーレイが飛び出し、コンテンツが表示されます。これは、マウスを備えたブラウザでうまく機能します。
さて、iPhone/iPadではサイトは見た目は素晴らしいですが、ユーザーにはマウスがなく、ユーザーフレンドリーなホバー状態もありません。 「ホバーしてコンテンツを表示する」の代替手段を優雅に提供する、最もユーザー経験のある従来の方法は何ですか。
また、誰かがそれを言う前に、私が私のサイトに持っているホバー効果は機能を果たしていませんが、見た目が良いだけであることを認識しています。参照 ここ
IOSデバイスにはホバーに相当するものはありません。コンテンツを操作する最も一般的なジェスチャーは「タップ」です。コンテンツボックスでポップアップまたはオーバーレイをタップで開くことができます（iPhoneよりもiPadのほうがうまく機能します）。確立された慣例のない他のジェスチャーを使用すると、ユーザーを混乱させるだけです。しかし、すべてのコンテンツをわかりやすく表示するほうが、優雅で使いやすいかもしれません。
現在のデザインを維持しています...
前述のように、iOSデバイスではホバー動作に相当するものはありません。 「指に従う」動作を実装したとしても、ほとんどのユーザーはおそらく指を画面から離し、ターゲットに移動してからもう一度画面に触れます。
1つのアプローチは、下部の隅に小さなページカールを付けることです。これにより、より多くの情報が利用可能であることをユーザーに知らせ、現実世界の既存のiOS規則を使用します。人々はコンテンツのピークに達するか、コンテンツを完全に開くことができ、他のボックスに移動してもその場所にとどまります。
シングルクリック（指によるタップ）は、タッチデバイスでのホバーの最も適切な代替手段です。
述べたように、「タップ」は典型的な相互作用です。あなたの目標が主にiOSでこれを機能させることである場合、私はタップイベントを提案し、次にカードフリップスタイルを使用してカードの「裏」にテキストを表示します。確かに多く使用されていますが、iOSタッチデバイスの要素の「メタ」情報を処理する標準的な方法になりつつあると思います。
あるいは、そのままにして、1つのタップでテキストをトリガーし、次のタップで非表示にすることもできます。
タッチスクリーンで「ホバー」を有効にする1つの方法は、シーケンシャルダブルタッチを使用することだと思います。これは、アクティブではない部分（リンクではないなど）で画面を長押しし、最初のタッチを維持しながら、ホバー情報のある領域を「タップ」（およびリリース）することを意味します。ホバー情報は、最初のタッチがリリースされるまで表示されたままです。
cursor: pointerをホバースタイルの要素に追加すると、iOSの状態が有効になり、他の機能を維持できます。しかし、Modernizrを使用して、タッチデバイスに対してのみその宣言を追加することをお勧めします。これにより、<a>タグを使用していない場合にfalse linkを取得しません。
.element {
cursor: pointer;
}
.element:hover {
/* your custom styles */
}