웹사이트에서 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에서만 적용하였다.
'CSS' 카테고리의 다른 글
(CSS) 카카오톡 브라우저 주소창과 네비게이션 바 고정 (0) | 2022.11.07 |
---|---|
(CSS) createGlobalStyle vscode prettier 적용 안됨 (0) | 2022.11.04 |
(CSS) table header 고정과 스크롤에 의해 border 투명화 현상 해결 (1) | 2022.08.18 |
(CSS) font-size 최소 크기 이상으로 줄여지지 않는 경우 (0) | 2022.07.21 |
스마트폰 가상 키보드 활성화시에 UI Resize 현상 방지 (0) | 2022.04.13 |