34

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

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

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

私がこの問題を最初に経験したとは思えませんが、検索しても何も見つかりませんでした。

ヘルプ？

ここに画像の説明を入力

通常 - ホバー - アクティブ ( addClass() 経由)

4

8 に答える 8

3

これは私がホバーで私のリストのためにそれを修正した方法です：

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では更新がトリガーされますか？！

Stuck On：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 /

于 2012-09-10T10:09:13.977 に答える
2

私もこの問題に出くわしました。私の問題は 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 */
}

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

于 2013-05-14T21:30:01.013 に答える
1

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

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
});

サンプルコードをいくつか与えてください。 touchstart と end は問題を解決するはずです

于 2012-05-17T20:51:42.443 に答える
0

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 以下のデバイスでボタンが押されたときに問題が発生しなくなります。

于 2019-06-11T09:26:51.897 に答える