5

これは可能ですか？すべてのホバー スタイルをmouseoverリスナーに変換する以外に、タッチ デバイスが CSS ホバー状態をトリガーするのを止めることはできますか?

タッチ入力とポインター入力の両方で動作する必要があるアプリケーションがありますが、うまく機能しますが、ユーザーがオブジェクトをタップした後、ホバー状態を無期限に保持する傾向があるため、ホバーに適用される特定のスタイルはタッチ デバイスでは意味がありません。

考慮事項:

  • デバイスの幅は、タッチ対応デバイスとは関係ありません。ここで使用しているタッチ スクリーンはデスクトップ サイズのモニターです。

  • マルチ入力デバイスでユーザーにタッチによる入力を強制したくありません。

4

2 に答える 2

0

私の解決策は、hover-active css クラスを HTML タグに追加し、:hover を使用してすべての CSS セレクターの先頭で使用し、最初の touchstart イベントでそのクラスを削除することです。

http://codepen.io/Bnaya/pen/EoJlb

JS:

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML:

<html class="hover-active">

CSS:

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}
于 2014-08-25T12:29:31.400 に答える