-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
모달 질문!!
21.04.22 18:48 작성 조회수 91
1
선생님~ 유튜브 강의 통해서 반응형 모달 강의를 듣다가 질문 드립니다!
.modal_content에 opacity : 0; 주시고 active시에 opacity:1;을 주셨는데, active되기 전 상태에서 마우스를 브라우저 쪽에 움직이다보면 input이나 p태그 쪽 위치에 마우스 포인터의 모양이 바뀌는 것을 발견해서요~ 이런 경우에는 display : none을 추가하고 active시에는 display: block을 추가해도 될까요~?
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2021.04.22
아... 커서가 바뀌는 부분은 텍스트 영역에 마우스가 올라가서 그렇습니다.
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;
}
답변 1