인프런 커뮤니티 질문&답변
작성한 질문수
hover 가상클래스 ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 강의중
작성
·
370
3
안녕하세요 강사님
강의를 듣다 질문이 생겨 질문드립니다.
드롭다운 컨텐츠 강의 중
23분경에 마우스 호버 이벤트가 p태그나 image가 위치하는 곳에 마우스가 올라가도 이벤트가 발생하는 문제가 있다고 말씀하셨는데요 그러면서 tour-item 에 border 가 그려진 영역이 마우스 반응영역이라고 하시면서 부모요소에 position :relative 자식요소에 position:absolute를 주시고 border영역을 제한하셨는데요
이렇게 border영역이 줄어들어도 실제로 마우스border가 그려진 영역 밖에 올려도 hover 이벤트가 발생을 하는데요 border영역 밖에서는 hover이벤트가 발생하지 않는것을 보여주시는거라 생각했는데 그게 아니라서 혼돈이 와서 질문드립니다 제가 뭔가 놓친 부분이 있나요?
최초 border영역에서만 hover 이벤트를 발생시키고 tour-content영역이 보여질때는 마우스가 tour-content영역에 있으면 tour-content를 계속 보여주고 싶은데요 여러가지 방법을 시도해보았는데 컨텐츠 내용이 사라질때 transition이 적용안되는 반쪽짜리 해결법이라 다른방법이 있나 궁금합니다
답변 2
1
아... 질문 내용이 그거 였군요.
opacity 0 인 영역에서 발생하는 문제를 해결하기 위해서는 3가지 방법이 있습니다.
강의 내용처럼 .tour-item를 부무요소로 .tour-content를 자식요소로 하는 방법
.tour-content에 visibility: hidden 주고 .tour-item:hover에 visibility: visible 주는 방법
트랜지션은 안되지만 그냥 .tour-content에 display: none을 주는 방법
위의 방법 중에서 아마도 2번째 방법을 소개하지 않아서 궁금하셨던 것 같습니다.
1
강의 중 말씀하신 내용이 hover 이벤트가 opacity 0 인 영역에서도 발생하는 문제가 있다고 말씀하셨습니다( 보이진 않지만 해당영역에 존재하기 때문)
=> opacity 0인 영역에서 hover 이벤트를 발생 시키지 않는 방법을 알려주실걸로 예상
=>예상과는 달리 position absolute로 요소를 붕 띄워도 (border 영역 줄어듦) opacity 0인 영역에 마우스를 올리면 hover 이벤트 발생
=> 해결을 위해 여러 방법을 시도해보았지만 깔끔하게 해결 하지 못했습니다
강의 잘듣고 있습니다 매번 답변 잘 해주셔서 감사합니다
감사합니다!!(__) 두번째 방법을 사용하니 제가 하고자 했던 방향으로 동작 합니다!!
말씀하신 강의 내용처럼 첫번째 방법은 dddddddd위에 마우스를 hover하면 hover 이벤트가 발생하는데 두번째 방법을 사용하니 dddddddd위에 마우스를 hover해도 hover 이벤트가 발생하지 않습니다 트랜지션도 잘되구요
opacity 0인 영역에서 발생하는 문제를 해결하기 위한 방법으로 강의 내용처럼 첫번째 방법은 해결 방법이 되지 못하는거 같은데 제가 잘못 이해하고 있는건가요? 강의 내용대로 하면 제가 뭘 놓친건지 두번째 방법과는 다르게 동작합니다.제가 잘못 한건지 다시한번 해보겠습니다 감사합니다