[ipad] iPhone / iPad 사용자를 위해 : hover 가상 클래스를 강제로 무시할 수 있습니까?

일부 장치 (다른 사람이 말했듯이)에는 터치 및 마우스 이벤트가 모두 있습니다. 예를 들어 Microsoft Surface에는 터치 스크린, 트랙 패드 및 화면 위로 마우스를 가져갈 때 실제로 호버 이벤트를 발생시키는 스타일러스가 있습니다.

:hover‘터치’이벤트의 존재에 따라 비활성화되는 모든 솔루션은 Surface 사용자 (및 기타 유사한 장치)에도 영향을 미칩니다. 많은 새로운 랩톱은 터치 식이며 터치 이벤트에 반응하므로 호버링을 비활성화하는 것은 정말 나쁜 습관입니다.

이것은 사파리의 버그이며,이 끔찍한 행동에 대한 정당성은 전혀 없습니다. 몇 년 동안 있었던 iOS Safari의 버그 때문에 iOS가 아닌 브라우저를 방해하지 않습니다. 나는 그들이 다음 주에 iOS8에서 이것을 고치기를 정말로 희망하지만 그 동안 ….

내 솔루션 :

일부는 이미 Modernizr 사용을 제안했지만 Modernizr를 사용하면 자체 테스트를 만들 수 있습니다. 내가 여기서 기본적으로하는 것은 :hoverModernizr 테스트를 지원하는 브라우저의 아이디어를 ‘추상화’하는 것인데, 이는 if (iOS)전체적으로 하드 코딩하지 않고도 코드 전체에서 사용할 수 있습니다 .

 Modernizr.addTest('workinghover', function ()
 {
      // Safari doesn't 'announce' to the world that it behaves badly with :hover
      // so we have to check the userAgent  
      return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
 });

그러면 CSS는 다음과 같이됩니다.

html.workinghover .rollover:hover
{
    // rollover css
}

iOS에서만이 테스트가 실패하고 롤오버가 비활성화됩니다.

이러한 추상화의 가장 좋은 부분은 특정 Android에서 중단되거나 iOS9에서 수정 된 경우 테스트를 수정할 수 있다는 것입니다.

답변

FastClick.attach(document.body);

@media (hover) {
  // properties
  my:hover {
    color: red;
  }
}