nextjs14
-
[CSS] link / anchor 태그 비활성화 [Tailwind CSS]웹 개발/소소한 팁, 버그 해결 2024. 3. 20. 02:37
일단 영상부터 보고 시작하자. 보면 알겠지만, 햄버거 메뉴를 만든다고 어째저째 숨기고 보이고 하는 것 까지는 완료했는데, 숨길 때 자연스러운 애니메이션을 위해 display:hidden 대신 투명도를 0으로 만들면서 문제가 발생하였다. 바로, 버튼이 있는 곳을 호버하거나 클릭 후 드래그 했을 때 사진처럼 링크가 뜬다는 것이다. 태그 / 태그를 눌렀을 때 아무 동작도 안하기 + 마우스 커서 디폴트로 유지하도록 코드를 수정하였는데도, 위치를 예상해서 드래그 해보면 해당 현상이 발생했다. 간단하게 css 속성을 추가하여 해결할 수 있었으며, pointer-events 속성을 바꿔주면 된다. .header-container.hamburger .nav-container > a { @apply opacity-0; ..