4

モバイルデバイス専用の jQueryMobile を使用して phonegap でアプリケーションを開発しています。私はアイコンを検索しました。ユーザーがアイコンに触れたときに、そのアイコンにホバー効果を与えたいです。

私はcssでこれを達成しました：

<a href="search.html" class="custom_header" >

    .custom_header:hover {
        background:url('../images/effect_glow.png') no-repeat center;

問題は、このホバー効果がタッチ後も残ることです。mousein と mouseout のような動作が必要です。この場合、その部分が触れていなくても効果が持続します。

指を離した後にホバー効果を削除するにはどうすればよいですか?

4

1 に答える 1

9

ご存知かもしれ:hoverませんが、タッチ スクリーン デバイスには存在しません。したがって、レスポンシブ Web サイトを設計するときは、:hover インタラクションをいつどこで使用するかを慎重に計画する必要があります。

これはモバイル デバイスに実装されていますが、主に iOS デバイスで非常にバグが多くなっています。一方、:focusフォーカスをサポートする要素でのみ使用できるため、タグとボタンは除外されるため、使用できません。また:active、モバイル デバイスでは使用できません。

この場合、jQuery を使用してこの問題を解決できます。

作業例: http://jsfiddle.net/Gajotres/84Nug/

この例ではvmousedown、 vmouseupとvmousecancelイベントを使用したので、デスクトップ/モバイル デバイスで同様にテストできます。touchstartそれらを, touchendおよびに置き換えるだけtouchcancelです。

touchcancel/vmousecancelボタンが押された状態のままになることがあるため、必要です。

コード：

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('touchstart','.custom_header' ,function(){
        $(".custom_header").css("background","url('http://www.cesarsway.com/sites/default/files/cesarsway-images/features/2012/March/Puppies-and-Exercise.jpg') no-repeat center");
    }).on('touchend', function(){
        $(".custom_header").css("background","red");
    }).on("touchcancel", function() {
        $(".custom_header").css("background","red");
     }); 
});
于 2013-05-29T13:39:14.953 に答える