(CSS) 모바일 기기에서 hover 제거

웹사이트에서 scrollTop button을 제작하였고 hover 효과를 주었다.

문제는 모바일 기기에서 해당 버튼을 클릭하면 hover 효과가 계속 남아 있다는 것이다.

 

hover 효과를 모바일 기기에서 제거하고 싶을 때 CSS 방법이다.

.scrollTopBtn {
  position: fixed;
  top: 85%;
  left: 75%;
  cursor: pointer;
  opacity: 0.2;

  @media (hover: hover) {
    &:hover {
      opacity: 1;
    }    
  }

@media의 hover: hover를 사용하여

hover 효과를 모바일이 아닌 full screen에서만 적용하였다.