Development Tip

CSS 호버는 모바일 장치에서 작동합니까?

yourdevel 2020. 12. 25. 10:35
반응형

CSS 호버는 모바일 장치에서 작동합니까?


CSS 호버는 모바일 장치에서 작동합니까? 일반 웹 브라우저에서는 제대로 작동하지만 모바일 브라우저에서는 작동하지 않는 CSS 호버 클래스가 있습니다.


:hover가상 클래스의 동작을 구별 할 수있는 포인팅 (그래픽 입력) 장치를 필요로 포인팅선택 / 활성화한다. 일반적으로 터치 인터페이스가있는 모바일 장치에서는 전자가없고 후자 만 있습니다. 또한 일부 펜 인터페이스는 포인팅이 아닌 활성화 만 허용합니다.

:hover가상 클래스는 사용자가 (일부 포인팅 장치) 요소를 지정하는 동안 적용되지만 활성화되지 않는다. 예를 들어, 시각적 사용자 에이전트는 커서 (마우스 포인터)가 요소에 의해 생성 된 상자 위로 이동할 때이 의사 클래스를 적용 할 수 있습니다. 대화 형 미디어를 지원하지 않는 사용자 에이전트는이 의사 클래스를 지원할 필요가 없습니다. 대화 형 미디어를 지원하는 일부 준수 사용자 에이전트는이 의사 클래스 (예 : 펜 장치)를 지원하지 못할 수 있습니다.

W3C : CSS 2.1 : 선택기, 동적 의사 클래스

따라서 귀하의 질문에 답하려면 장치에 따라 다르지만 그렇지 않을 수 있습니다. 그리고 그것에 의존하지 마십시오. 터치 스크린 장치가 빠르게 인기를 얻으면 포인팅 전용 이벤트 전체를 잃게됩니다.


한숨. 이 질문에 대답하는 사람이 실제로 실제 장치에서 시도한 것 같습니다. 대부분의 경우 작동합니다. 첫 번째 클릭은 호버 역할을합니다.

여기에 더 많은 정보 : http://designshack.net/articles/css/are-hover-events-extinct/


누군가 화면에 손가락을 대고 탭하려고 할 때 장치가 감지 할 수없는 경우에는 그렇지 않습니다. :)


질문자는 "모바일 장치에서 css hover가 작동합니까?"라는 의미는 무엇입니까?

그는 분명히 말 그대로 그것을 의미하지 않습니다. 왜냐하면 모바일 장치에는 호버링과 같은 것이 없기 때문에 작동하지 않기 때문입니다.

"휴대 기기에서 마우스 오버 스타일로 개체를 탭하면 어떤 일이 발생합니까?"라는 의미 인 경우 대답은 예입니다. 그러나 발생하는 일은 장치 / 브라우저에 따라 다릅니다.

특히 iPhone / Safari 및 Android에서 응답은 스타일 변경이 포함 된 OnClick () 이벤트 핸들러를 작성한 것과 같으며 다른 객체를 탭할 때까지 지속됩니다. Windows Phone에서 스타일 변경은 휴대폰에서 손가락을 누르고있는 동안 발생했다가 놓으면 되돌립니다.

내가 설정 한 테스트 사이트 davidleader.net/mobiledemo.html 에서 기기를 확인할 수 있습니다 .


모바일 장치에서 사용되는 브라우저에 따라 다릅니다. 모바일 장치 용 쿼크 모드참조하고 브라우저 / 플랫폼에서이를 구현하는지 확인하십시오.


내 경험으로 볼 때 브라우저 (사파리 또는 크롬)가 무엇이든 내 iphone4에서 잘 작동하지만 크롬이있는 nexus10에서는 제대로 작동하지 않습니다 ...

나는 메뉴를 구현하기 위해 : hover를 사용했습니다. 내가 "작동한다"라고 말하면 첫 번째 터치는 바탕 화면의 마우스 오버처럼 동작하고 두 번째 터치는 클릭처럼 동작합니다. "작동하지 않습니다"라고 말하면 터치가 직접 클릭하는 것처럼 작동한다는 의미입니다.


나는 당신이 모바일 인터페이스에서 마우스 오버하지 않기 때문에 아니오라고 말할 것입니다. 터치 스크린의 경우 누르기 만하면됩니다. 그렇지 않으면 링크를 통해 이동합니다.


터치 스크린 장치에서는 마법을 사용하지 않지만 사용자가 일부 화살표 키를 사용하여 탐색하는 모바일에서 작동합니다 (또는 아마존 빛나다).


또한 블랙 베리 스톰 1 장치에서 작동하므로 수도 터치 스크린으로 인해 터치 및 클릭 이벤트가 발생합니다.


: hover는 Android 기본 브라우저에서 작동하지만 동시에 클릭을 트리거하지 않고 hover를 트리거하는 것은 정말 까다 롭습니다 (사용자에게는).

참조 URL : https://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices

반응형