2013-07-01 3 views
5

これは可能ですか?ホバースタイルをすべてmouseoverリスナーに変換するのが短すぎると、タッチデバイスがCSSホバー状態をトリガーするのを止めることは可能ですか?タッチデバイスにホバー状態を表示しない

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

もの:

  • デバイスの幅は、私にはタッチ対応デバイスとの相関を負いません、我々はここで使用している タッチスクリーンは、デスクトップサイズのモニタです。

  • 私はユーザーが複数入力の デバイスをタッチして入力する必要はありません。

+1

私はあなたの質問は非常にinterresting発見し、accrosを来た[次の記事]( http:// www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/)。同じ問題ではありませんが、記事の最後にある解決策はあなたの状況に当てはまりますか? –

+1

関連:http://stackoverflow.com/questions/8291517/ – xec

+0

@Bartdude感謝、私の唯一の不満は、デバイスがタッチ入力を使用できるかどうかではなく、タッチ入力が可能かどうかを検出すると信じていることです。これは、ユーザーが複数の入力デバイスを使用して入力するように強制するという第2のルールを破るため、最適ではないものの、最適ではありません。それはIE10 AFAIK(私がIEが正しいと思っていた独自のイベントを使用しています...それもボックスモデルです)でも、それを検出しようとすることはできますが、動作しません。 –

答えて

2

私は上記のコメントのリンクで共有されたアプローチに従ってこの問題を解決しました。使用しない場合は、このシナリオでModernizrを使用することを検討してください。あなたがそうのようなタッチイベントに対してチェックすることができ、Blenderは言及し、ユーザーとして

...だけでなく、いくつかの他のアプローチを聞きたい:

html.touch { 
    /* Touch Device ~ No Hovers */ 
} 

html.no-touch { 
    /* Not a Touch is disabled */ 
} 
html.no-touch .element:hover { 
    opacity:.5; 
} 
+0

ありがとう、これは興味深い点です。 Modernizrが実際のタッチ入力でデバイスを検出したり、可能性のあるデバイスを正常に検出したかどうかはわかりませんが。これは別の問題を引き起こします。私はマルチ入力デバイスのユーザーにポインタの代わりにタッチ入力を使用させています(少なくとも直感的な操作をするためには)。 –

+0

Modernizrのタッチ検出機能を掘り下げて、次のようにチェックします: 'if(( 'ontouchstart' in window)||ウィンドウ。DocumentTouch && document instanceof DocumentTouch){' –

+0

}ブラウザがタッチイベントをサポートしているかどうかをテストするだけで、タッチデバイスである必要はありません。さて、あなたは私を連れて行きました...あなたの最終的なアプローチで更新してください。 –

0

私のソリューションは、にホバー - アクティブCSSクラスを追加することですHTMLタグ を使用し、すべてのCSSセレクタの先頭に:ホバー を使用し、最初のタッチスタートイベントでそのクラスを削除します。

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; 
} 
関連する問題