터치스크린이 없는 기기에서는 hover가 정상적으로 작동합니다. 예를 들어 마우스나 터치패드 포인터를 사용할 때 hover가 작동하며, 아래는 공유 버튼 위에 마우스를 올려둔 모습입니다:
하지만 터치스크린과 마우스/터치패드를 모두 갖춘 노트북의 경우.. 마우스가 분리된 상태인지 연결된 상태인지를 감지하는 방법이 있는지 확실하지 않습니다.
CSS4 미디어 쿼리를 통해 이를 수정할 수 있는 방법이 있는지 잘 모르겠습니다:
https://stackoverflow.com/a/52854585/1
https://stackoverflow.com/a/52745820/1
하지만 _터치스크린_과 마우스로 모두 인식되는 기기에서 hover를 허용할 수 있도록 수정할 수 있다면 좋겠습니다. 사용자들이 작동하게 하려고 노트북의 터치스크린을 비활성화하는 경우가 있는데, 아마도 터치스크린 기능을 거의 사용하지 않기 때문일 것입니다.
이것을 테스트해 보았습니다 .. JSFiddle - React, Tailwind, and code Playground 결과는 다음과 같습니다:
- 데스크톱
마우스 - 아이폰
터치 - 서피스 프로 마우스 ← 틀림!
또한 Checking device hover capabilities with JavaScript using interaction media features 도 테스트해 보았는데 동일한 결과였습니다 – 터치스크린 + 마우스 기기는 데스크톱과 동일하게 보입니다.