web-dev-qa-db-ja.com

CSSホバーはモバイルデバイスで動作しますか?

CSSホバーはモバイルデバイスで動作しますか?通常のWebブラウザーでは正常に動作するcssホバークラスがありますが、モバイルブラウザーでは動作しません。

57
Sam

:hover疑似クラスには、アクションpointingおよびselecting /を区別できるポインティング(グラフィカル入力)デバイスが必要です。 通常、タッチインターフェイスを備えたモバイルデバイスでは、前者はなく、後者のみです。また、一部のペンインターフェイスでは、ポインティングではなくアクティブ化のみが許可されます。

:hover疑似クラスは、ユーザーが(ポインティングデバイスを使用して)要素を指定している間に適用されますが、アクティブにはなりません。たとえば、ビジュアルユーザーエージェントは、カーソル(マウスポインター)が要素によって生成されたボックスの上に置かれたときに、この擬似クラスを適用できます。インタラクティブメディアをサポートしていないユーザーエージェントは、この擬似クラスをサポートする必要はありません。インタラクティブメディアをサポートする一部の適合ユーザーエージェントは、この擬似クラス(ペンデバイスなど)をサポートできない場合があります。

W3C:CSS 2.1:セレクター、動的擬似クラス

だから、あなたの質問に答えるために:それはデバイスに依存しますが、おそらくそうではありません。そしてそれに頼らないでください。タッチスクリーンデバイスの人気が急速に高まっているため、ポインティングのみのイベント全体が失われます。

33
Joey

ため息。この質問に誰も実際に実際のデバイスで試していないようです。多くの場合、機能します。最初のクリックはホバーとして機能します。

詳細はこちら: http://designshack.net/articles/css/are-hover-events-extinct/

27
Andy Baker

誰かが画面上で指をホバリングしていることをデバイスが検出できない限り、タップしようとはしません。 :)

7
Nathan Long

質問者は「CSSホバーはモバイルデバイスで動作しますか?」とはどういう意味ですか?

彼は明らかに文字通りそれを意味していません。なぜなら、モバイルデバイス上にホバーするようなものがなく、それが機能しないからです。

「モバイルデバイス上で、ホバースタイルのオブジェクトをタップすると、何かが起こりますか?」答えは「はい」ですが、何が起こるかはデバイス/ブラウザによって異なります。

特にiPhone/SafariとAndroidでは、応答はスタイル変更を伴うOnClick()イベントハンドラーを記述したかのようになり、別のオブジェクトをタップするまで持続します。WindowsPhoneではスタイルの変更は、電話で指を押し下げたときに発生し、指を離すと元に戻ります。

デバイスは davidleader.net/mobiledemo.html で設定したテストサイトで確認できます。

7
David

モバイルデバイスで使用されているブラウザに依存します。モバイルデバイスについては Quirks Mode を参照し、ブラウザ/プラットフォームで実装されるかどうかを確認してください。

3
Digicoder

私自身の経験から、ブラウザ(サファリまたはクローム)が何であれ、iphone4では正常に動作しますが、クロームを使用したnexus10では正常に動作しません...

:hoverを使用してメニューを実装しました。 「動作する」と言うとき、最初のタッチはデスクトップ上のホバーのように動作し、2番目のタッチはクリックのように動作します。 「機能しない」と言うとき、タッチは直接クリックのように動作することを意味します...

2
dajam

モバイルインターフェイスでホバリングしないので、ノーと言います。タッチスクリーンの場合は、押すだけです。それ以外の場合は、リンクを移動するだけです。

0
Dustin Laine

ブラックベリーストーム1のデバイスでも動作します。これは、スエードの触覚画面によるタッチおよびクリックイベントがあるためです。

0
rlemon

タッチスクリーンデバイスでは魔法をかけませんが、ユーザーがいくつかの矢印キーを使用してナビゲートするモバイル(またはAmazon Kindle)では動作します

0
silverskater

:hoverはAndroidデフォルトのブラウザで動作しますが、クリックを同時にトリガーせずにホバーをトリガーすることは(ユーザーにとって)非常に注意が必要です。

0
peq