2013-12-14 3 views
0

기본적으로 나는 웹 디자이너이며 jQuery에 대해 잘 모르기 때문에 조금 길어진다. 버튼을 관리하기 위해 일부 jQuery 스크립트를 작성했지만 PC 및 Touch 장치에서 원하는대로 동작하지 않습니다.PC와 터치 장치 (jQuery) 간의 버튼 동작

두 개의 버튼 집합을 관리해야합니다. "images"버튼 (swap)과 CSS 버튼 (배경색 변경).

터치 장치가 잘못 관리되었지만 터치 장치와 PC에서 마우스를 계속 클릭하여 "마우스 오버"효과를 사용하지 않도록 설정하려고합니다. 그러나 드라마가 거기에있다.

// Rollover on image 
$(function() { 
    $('img.rollover').on('mouseenter', function(){ 
    $(this).css("cursor", "pointer"); 
     this.src = this.src.replace("-normal","-hover"); 
    }); 

    $('img.rollover').on('mouseleave', function(){ 
     this.src = this.src.replace("-hover","-normal"); 
    }); 
}); 

// Toggles forms 
$(function() { 
    $("#form-contact").hide(); 
    $("#form-devis").hide(); 

     $("#btn-contact").click(function(){ 
     $(this).toggleClass("btn-form-hover");  
     $("#form-contact").fadeToggle(500, "linear"); 
     $("#form-devis").hide(); 
     $("#btn-devis").removeClass("btn-form-hover"); 
    }); 

    $("#btn-devis").click(function(){ 
     $(this).toggleClass("btn-form-hover"); 
     $("#form-devis").fadeToggle(500, "linear"); 
     $("#form-contact").hide(); 
     $("#btn-contact").removeClass("btn-form-hover"); 
    }); 
}); 

// Toggle client area 
$(function() { 
    $("#div-client-area").hide(); 

     $("#btn-clients").click(function(){ 
     $("#div-home").toggle(500,"linear"); 
     $("#div-client-area").toggle(500,"linear"); 
    }); 
}); 

답변

0

기본 터치 장치에 의해 호버를 지원하지 않습니다 Model 여기

내가 쓴 엉망입니다 : 여기

내가 만든 모델입니다. 그러나 jQuery로 호버 효과를 만들려고하는 것 같습니다. 반드시 필요하지는 않습니다! div:hover{ cursor:pointer; background-color: xyz... }으로 CSS를 사용하면됩니다. 바탕 화면에는 적용되지만 터치에는 적용되지 않습니다.

또는 경량 라이브러리 Modernizr을 사용하여 브라우저에서 터치 이벤트의 존재를 감지 할 수 있습니다. 사용할 수있는 기능에 따라 클래스를 <html> 태그에 추가합니다. 테스트 할 기능 중 하나는 touch이므로 클래스가 있는지 확인하고 그에 따라 조건문을 작성할 수 있습니다. if($("html").hasClass("touch"){ ... })과 같은 것입니다.

희망은 당신에게 광범위한 방향을 제시합니다.