0

ホバーを setTimeout 表示に変換できる簡単な解決策があるかどうか疑問に思っています。設定した時間にホバーが現れたり消えたりする場所。または、ダブルタップでのみホバー状態を表示するダブルタップ ソリューションを実装します。

JavaScript を使用すると、ウィンドウ サイズに基づいて関数を呼び出すことができます。以下のようなものを使用します。

if( $(window).width() > 768 ) {

しかし、ウィンドウ サイズ (つまり、スマート モバイル/タブレット、iOS/Android) を決定することですべてのホバー状態を取得し、それらの状態をダブルタップまたは一定時間表示するように変換する方法はありますか。そして、彼らは消えます。

このようにアプローチできることを願っています。これらのソリューションを使用してモバイル用のすべての要素を再構築するのとは対照的です。

4

2 に答える 2

3

Modernizr ( http://modernizr.com/download/ ) を使用してタッチ デバイスを検出します。そのため、ホバー状態は非タッチ デバイス (デスクトップ) のみになります。Modernizr は、タグに追加.touchまたは.no-touch分類します。html次に、次のようなことができます。

CSS

.no-touch .class:hover { color: red; }
.touch .hover { color: red; }

.touch.hover|| タッチ デバイスのみにクラスを追加|| ダブルタップ

SCSS

.class {
    .no-touch & {
        &:hover { color: red; }
    }
}

/* add class .hover on touch device only || doubleTap */  
.hover {
   .touch & { color: red; }
}

ジャバスクリプト|| || QuoJS || http://quojs.tapquo.com/

$$('.your-class').doubleTap(function() {
    $(this).toggleClass('hover');   
});
于 2013-04-15T16:04:24.630 に答える