web-dev-qa-db-ja.com

モバイルサファリリンクはタッチ後もフォーカスを保持

私のナビゲーションは非常に簡単です。テキストに境界線と透明なグラデーションpng背景を追加するホバー状態と、jQueryによって追加されたときにその透明な画像の背後に色を追加する追加のクラスがあります。

Webブラウザーでクラスをクリックして切り替えると、色が出たり入ったりするのがわかりますが、ボタンからマウスを離さないと、背景画像は残ります。これは予想される動作です。

私の問題は、iPadを使用しているとき、タッチがホバー状態を保持しているように見え、別のボタンをクリックしない限り：hoverプロパティが消えないことです。その場合、別のボタンが押されるまでそのボタンに永続的な：hoverプロパティが追加されます。

私がこの問題を抱えているのは初めてだとは想像できませんが、検索結果は何も現れていません。

助けて？

enter image description here

通常-ホバー-アクティブ（addClass（）経由）

jquerycssipadmobile-safari
31
d2burke

Hoverは、タッチイベントではあまりポインターと連携しないように設計されたCSS擬似クラスです。通常、モバイルでは意味をなさないため、ホバーの使用は完全に避けたいでしょう。これに対処する最も簡単な方法の1つは、メディアクエリ内にホバーCSSを配置することです。これを行うには、タブレットまたはデスクトップ画面をターゲットにします。次の2つのソリューションがあります。

1- iPadをターゲットにする：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

2-ターゲットデスクトップ：

@media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

どちらの方法も有効です。特定のデバイスでCSSが誤ってトリガーされていることに気付いた場合、最小幅と最大幅の値を変更できます。

16
charlitosJS

Modernizrを使用している場合、非タッチデバイスのルートhtml要素にno-touchクラスが追加されます。次に、これを行うことができます：

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}
20
Redtopia

これは、ホバーでリストを修正する方法です：

CSS：

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery：

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

バックボタンナビゲーションのホバーの修正...

<body onunload="$('a').blur();">

または

$(window).unload( function () { $('a').blur(); } );

単一化されていない場合、ブラウザがページを離れる直前にアンロードイベントが発生します。アンロード時にページ内のすべてのリンクをぼかすことで、ホバー状態を解除できました。戻るボタンを使用して元のページに戻ると、クリックされたリンクがデフォルトの状態で表示されます。

残念ながら、onclickイベントはアンロードをトリガーしないようですが、iOS 5では更新が行われますか？！

立ち往生：hover- http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ jQueryを使用して置き換える- http：// www .nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload /

2
Zymotik

私もこの問題に出くわしました。私の問題はiPadにあり、アンカーをタップして少しスクロールすると、クリックイベントは発生しませんでしたが、要素はホバー状態のCSSを保持します。私の考えでは、iPadは実際にフォーカス状態を保持し、デスクトップエクスペリエンスをシミュレートするために：hover CSSスタイルを適用していました。

非JSおよび実用的な回避策は、ホバースタイルが必要でない場合、タッチデバイスにホバースタイルを提供しないことです。タッチデバイスには「実際の」ホバー状態はありませんが、要素にフォーカスがあるか、タップアンドスクロールするとホバーがシミュレートされているように見えます。

Modernizr.js をロードして、ホバースタイルを.no-touchのスコープに移動しました-

つまり.

/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
  /* hover styles */
}

次に、要素をクリックすると、アクティブなクラスが切り替わります。

.my-element.active {
  /* active styles */
}

唯一のマイナス点は、「タップ状態」にならないことです。私のアプリにとってはそれほど重要ではないため、その解決策をまだ調査していません。

2
BradGreens

次のイベントをキャッチする必要があります

touchstart-指が画面に触れたとき

touchend-指が画面から離れたとき

ホバリングとホバリング解除と考えてください。コードを投稿できる場合は、私が言っていることを理解していない場合に、より役立つことがあります。

$('element').on('touchstart', function(){
    // apply hover styles, or better yet addClass() of hover styles
});

$('element').on('touchend', function(){
    // removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});

サンプルコードを提供すると、タッチスタートとエンドで問題が解決するはずです

1
Huangism

これは古い投稿ですが、2019年に今日これに苦労しました。このクリーンなソリューションを見つけました。皆さんと共有したいと思います。

<a href="#">Try hovering over me!</a>

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

基本的にここでやっていることは、ポインターメカニズムを備えたデバイスでホバーを使用することです。最近では、サイトのアクセシビリティを向上させるためのhtmlリーダーを備えたソフトウェアがありますが、すべてのモバイルデバイスで：hoverを非アクティブにすることはお勧めできません。明確にするために、ポインティングメカニズムを持たないデバイスでホバーが有効にならない場合は、：hoverスタイルを適用します。

0
Kenny Hank

SCSSを使用している場合、以下を実行することをお勧めします。

// primary-buttons
.primary-button, .primary-button:visited,
.primary-button:focus {
    background: red;
    color: white;
}

.primary-button:hover {
    background: green; // Only for big screens
    @media(max-width: 768px) {
        background: red;
    }
}

背景の値を初期値にリセットすると、解像度が768px以下のデバイスでボタンが押されても問題はなくなります。

0
juanjinario