모바일에서 링크, 버튼 및 div를 가리키는 방법은 무엇입니까?

Question

휴대 기기에 요소를 가져 오는 데 문제가 있습니다. 내 CSS에서

, 내가 같은 입력 : 그러나 내 아이폰과 다른 터치 장치에이 내 바탕 화면에 잘 가져가 보인다

.button:hover { 
    background-color: #fff; 
} 

을, 나는 버튼 마우스 오버를 할 수없는 것.

Answer 1

모바일에 hover 이벤트가 없으므로 마우스 오버 동작을 정의 할 수 있으며 데스크톱에서 작동합니다. 하지만 모바일에서는 클릭/터치만으로이 호버를 볼 수 있습니다.

Answer 2

호버는 다른 것을 의미합니다. 이 경우 HTML 버튼이나 사용하는 요소에 마우스 커서를 올려 놓습니다.

휴대 전화의 경우 마우스 커서가 없습니다. 그 항상 클릭. 대부분의 경우 호버는 클릭 또는 터치에서만 표시됩니다. 이 기능이 정말로 필요한 경우 Javascrit onclick() 또는 다른 기능을 사용하면 클릭하거나 터치 할 때 약간의 기능을 추가 할 수 있습니다.

Answer 3

jQuery/CSS에서이 문제를 신속하게 해결하기 위해 다음을 수행했습니다.

<div class="one-block"> 
    .... 
    <div class="mobile-mask"></div> 
</div> 

:> .mobile-mask -이 블록에서 마지막 요소

.one-block { position: relative; } 

추가 : 그 위치

.one-block:hover, .one-block.hover { ... } 

:

1. 이처럼 내 요소의 스타일을 썼다

2. 는 .mobile-mask 위치 : 비 모바일 (이 부분에 대한

   .mobile-mask { 
       position: absolute; 
       top: 0; 
       bottom: 0; 
       left: 0; 
       right: 0; 
   } 
   

3. 숨기기 전혀하지 정확 : 단지 CSS로. 당신이 어떤 다른 수단에 의해 모바일 장치를 감지하고, 예를 들어, 클래스를 몸체에주는 것이 더 정확할 때보 다.

   $('.mobile-mask').on('click', function(){ 
       $('.list .mobile-mask').show(); 
       $('.list .one-block').removeClass('hover'); 
       $(this).hide(); 
       $(this).parent().addClass('hover'); 
   }); 
   $(window).on('resize', function(event){ 
       var windowWidth = $(this).width(); 
       if(windowWidth > 680){ 
       $('.list .one-block').removeClass('hover'); 
       } 
   });