[CSS] 모바일에서 hover 제어하기

GNB의 서브메뉴를
PC버전에서는 마우스오버로, 모바일에서는 클릭을 사용한 드롭다운으로 처리하고자 한다.

           ...
          <ul class="nav__gnb">
            <li><a href="javascript:void(0);">이벤트</a>
              <ul class="nav__sub-depth2">
                <li><a href=“javascipt:void(0);”>진행중인 이벤트</a></li>
                <li><a href=“javascipt:void(0);”>종료된 이벤트</a></li>
              </ul>
            </li>
          </ul>

---

CSS 시도했던 방법

	.nav {
    	&__gnb > li { 
        	&:hover ul {
        		display: block;
        	}
       }
    	

1. pointer-event: none;
   -> 실행안됨. hover뿐만 아니라 스크립트에서 처리한 click에도 영향이 미쳤다.😱
2. @media (hover: none) { ... }
   -> PC버전에서도 실행이 되지 않음.....

---

@media를 사용해서 처리하기

미디어 쿼리 시작이 768px이라면 @media screen and (max-width: 768px)
PC버전에서만 사용할 코드를 @media screen and (min-width: 769px) 으로 처리하는 것이다

위에 쓰여진 SCSS 코드에서

	    // pc control

      .nav {
          &__gnb > li {
              @media screen and (min-width: 769px) {
              	  &:hover ul {
                      display: block;
                 }
         	}
     	}
    	

이렇게 바꾸면 PC에서만 hover 기능이 작동된다.
hover 외에도 PC에서만 처리하는 기능은 저런 식으로 응용하면 될 듯하다!

---

생각지도 못한 오류라서 처음에는 스크립트도 써보고 여러 시도를 해봤지만
미디어 쿼리로 처리하는 것이 제일 효과적이고 빠른 듯하다

참고: https://stackoverflow.com/questions/31433000/how-do-i-disable-css-hover-in-a-media-query