인프런 커뮤니티 질문&답변

아... 커서가 바뀌는 부분은 텍스트 영역에 마우스가 올라가서 그렇습니다.

opacity: 0라서 눈에는 안보이지만 영역이 존재하기 때문에 텍스트영역에 마우스가 올라가서 커서가 변경되는 것입니다.

제가 완전하게 만들어야 하는데 코드가 빠졌네요. 아래 코드를 보시면 2가지 중 1가지를 선택하시면 커서가 생기는 문제가 해결됩니다.

첫째, visibility로 아예 대상을 감추고 보이는 것입니다.

둘째, pointer-events로 마우스 포인터 반응을 못하게하고 다시 하게 하고 입니다.

.modal {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.7);

  z-index: 10;

  opacity: 0;

  transition: .5s;

  /* pointer-events: none; */

  visibility: hidden;

}

.modal.active {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

  /* pointer-events: all; */

  visibility: visible;

}