1

ボタンに a:hover 効果があります。ただし、iPadとiPhoneでホバーを無効にしたい。動いていない

$(document).ready(function () {
            $(".content").hide();
            $(".open1").click(function () {
                $(this).next().slideToggle(400);

                if('ontouchstart' in document){$('#btn_01').unbind('mouseenter mouseleave');}

                var btn = $('#btn_01'), isOn = btn.hasClass('on');              
                if(isOn) { btn.removeClass('on'); }
                else if(btn) { btn.addClass('on'); }
                });
        });

<style type="text/css">

    #btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
        #btn_01:hover{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
        #btn_01.on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
4

2 に答える 2

0

この問題を解決する非常に簡単な方法を見つけました。css @media を使用して、ホバーの画像を元の画像に変更します。

#btn_01{btn_01_on.png'}
#btn_01:hover{btn_01_on.png'}
#btn_01.on{btn_01_over.png'}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
#btn_01:hover{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
#btn_01.on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
于 2013-02-28T13:54:23.177 に答える
0

私は異なるアプローチをとります：

jQuery(function($) {
    var className = ('ontouchstart' in document ) ? "touch-device" : "desktop-device";

    $(document.body).addClass(className);
});

body.desktop-device次に、 andを使用してスタイルの微調整を指定できますbody.touch-device。

body.desktop-device #btn_01:hover {
    background: red;
}
body.touch-device #btn_01 {
    background: blue;
}

var a = b ? c : d;

//means:

if ( b ) {
    var a = c;
}
else {
    var a = d;
}
于 2013-02-27T14:42:21.553 に答える