17
モバイルブラウザーのホバー効果を無効にする
デスクトップとタブレットの両方から使用することを意図したWebサイトを書いています。デスクトップからアクセスしているときに、画面のクリック可能な領域を:hover効果（異なる背景色など）で明るくしたいのですが、タブレットではマウスがないため、ホバー効果は必要ありません。 問題は、タブレット上で何かをタップすると、ブラウザには明らかに「見えないマウスカーソル」があり、タップした場所に移動してそこにそのまま残します。つまり、タップしたものがライトで点灯します何かをタップするまでホバー効果。 マウスを使用しているときにホバー効果を取得し、タッチスクリーンを使用しているときにホバー効果を抑制するにはどうすればよいですか？ 誰かがそれを提案することを考えていた場合、私はユーザーエージェントのスニッフィングを使いたくありません。同じデバイスにタッチスクリーンとマウスの両方を搭載することもできます（今日はそれほど一般的ではないかもしれませんが、将来的にはさらに普及するでしょう）。このデバイスには興味がありません。現在どのように使用されているか（マウスやタッチスクリーン）に興味があります。 私はすでにフックしようとしたtouchstart、touchmoveとtouchendのイベントをして呼び出すpreventDefault()抑制する「目に見えないマウスカーソル」時間の一部をしており、それらのすべてに。しかし、2つの異なる要素間をすばやく前後にタップすると、数回タップすると、「マウスカーソル」が移動し、ホバー効果が点灯しますpreventDefault。これは、常に光栄に思うわけではないようです。必要がない限り、詳細について退屈することはありません-それが適切なアプローチであるかどうかさえわかりません。誰かがより簡単な修正を持っている場合、私はすべて耳です。 編集：これは沼地標準のCSS :hoverで再現できますが、参考のために簡単に再現します。 <style> .box { border: 1px solid black; width: 150px; height: 150px; } .box:hover { background: blue; } </style> <div class="box"></div> <div class="box"></div> いずれかのボックスの上にマウスを置くと、青色の背景が表示されます。しかし、いずれかのボックスをタップすると、背景も青色になります。これは私が防止しようとしていることです。 上記を実行し、jQueryのマウスイベントをフックするサンプルもここに投稿しました。あなたはタップイベントも発火することを確認するためにそれを使用することができmouseenter、mousemoveそしてmouseleave。
113
javascript
hover
touch