@media (hover: hover)

CSS 호버 문제는 일반적으로 장치마다 :hover 의사 클래스를 서로 다른 방식으로 해석할 때 발생합니다.가장 일반적인 문제 중 하나는 사용자의 포인터가 더 이상 요소 위에 있지 않은 후에도 :hover 스타일이 계속 적용되는 "고정 호버"문제입니다.이 문제를 해결하려면 인접한 형제 선택기(+)를 사용하여 사용자의 포인터가 요소 위에 있을 때만 활성화되는 호버 리스너를 만들 수 있습니다.또 다른 해결책은 사용자가 요소 위에 마우스를 올려놓을 때만 호버 클래스나 스타일을 적용하는 @media(hover:호버)및 (pointer:fine)와 같은 미디어 쿼리를 사용하는 것입니다.마지막으로,호버 동작이 필수적이지 않은 경우 포인터-이벤트 속성을 사용하여 모바일 장치에서 호버 효과를 비활성화할 수 있습니다. (runebook 설명)

@media (hover: hover) {
  /*호버가 지원되는 경우 */
  a:hover {
    color: white;
    background: black;
  }
}