[CSS] link / anchor 태그 비활성화 [Tailwind CSS]

일단 영상부터 보고 시작하자.

 

 

보면 알겠지만, 햄버거 메뉴를 만든다고 어째저째 숨기고 보이고 하는 것 까지는 완료했는데,

숨길 때 자연스러운 애니메이션을 위해 display:hidden 대신 투명도를 0으로 만들면서 문제가 발생하였다.

바로, 버튼이 있는 곳을 호버하거나 클릭 후 드래그 했을 때 사진처럼 링크가 뜬다는 것이다.

 

<a> 태그 / <Link> 태그를 눌렀을 때 아무 동작도 안하기 + 마우스 커서 디폴트로 유지하도록 코드를 수정하였는데도,

위치를 예상해서 드래그 해보면 해당 현상이 발생했다.

 

간단하게 css 속성을 추가하여 해결할 수 있었으며, pointer-events 속성을 바꿔주면 된다.

.header-container.hamburger .nav-container > a {
  @apply opacity-0;
  transition: opacity 250ms;
  pointer-events: none;
}
.header-container.hamburger .nav.open .nav-container > a {
  @apply opacity-100;
  transition: opacity 250ms;
  pointer-events: auto;
}

 

끗~