hover 가상클래스 ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 강의중
460
4 asked
안녕하세요 강사님
강의를 듣다 질문이 생겨 질문드립니다.
드롭다운 컨텐츠 강의 중
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이 적용안되는 반쪽짜리 해결법이라 다른방법이 있나 궁금합니다
Answer 2
1
아... 질문 내용이 그거 였군요.
opacity 0 인 영역에서 발생하는 문제를 해결하기 위해서는 3가지 방법이 있습니다.
강의 내용처럼 .tour-item를 부무요소로 .tour-content를 자식요소로 하는 방법
.tour-content에 visibility: hidden 주고 .tour-item:hover에 visibility: visible 주는 방법
트랜지션은 안되지만 그냥 .tour-content에 display: none을 주는 방법
위의 방법 중에서 아마도 2번째 방법을 소개하지 않아서 궁금하셨던 것 같습니다.
0
감사합니다!!(__) 두번째 방법을 사용하니 제가 하고자 했던 방향으로 동작 합니다!!
말씀하신 강의 내용처럼 첫번째 방법은 dddddddd위에 마우스를 hover하면 hover 이벤트가 발생하는데 두번째 방법을 사용하니 dddddddd위에 마우스를 hover해도 hover 이벤트가 발생하지 않습니다 트랜지션도 잘되구요
opacity 0인 영역에서 발생하는 문제를 해결하기 위한 방법으로 강의 내용처럼 첫번째 방법은 해결 방법이 되지 못하는거 같은데 제가 잘못 이해하고 있는건가요? 강의 내용대로 하면 제가 뭘 놓친건지 두번째 방법과는 다르게 동작합니다.제가 잘못 한건지 다시한번 해보겠습니다 감사합니다
1
질문 내용을 여러번 읽었는데 어떤 점을 질문하시는지 솔직히 잘 이해가 되지 않습니다.
번거롭지만 다시 한번 댓글로 질문 해주시겠어요.
1
강의 중 말씀하신 내용이 hover 이벤트가 opacity 0 인 영역에서도 발생하는 문제가 있다고 말씀하셨습니다( 보이진 않지만 해당영역에 존재하기 때문)
=> opacity 0인 영역에서 hover 이벤트를 발생 시키지 않는 방법을 알려주실걸로 예상
=>예상과는 달리 position absolute로 요소를 붕 띄워도 (border 영역 줄어듦) opacity 0인 영역에 마우스를 올리면 hover 이벤트 발생
=> 해결을 위해 여러 방법을 시도해보았지만 깔끔하게 해결 하지 못했습니다
강의 잘듣고 있습니다 매번 답변 잘 해주셔서 감사합니다
강의 내용 관련 문의드립니다 (animation)
1
55
2
Grid 수직정렬 제대로 안됩니다.
1
72
1
강의 화면이 안나옴
1
208
1
로그인 폼 CSS 디자인 코드 질문 있습니다.
1
235
1
inherit와 100%의 차이가 궁금합니다.
1
322
2
<br>태그 사용 빈도를 줄이게 될 경우의 질문입니다.
1
201
1
수업자료는 없나요?~
1
325
1
[공유] 부모 요소가 position: absolute 인 경우에 대한 설명
1
663
1
float: right 요소가 아래에 배치되는 이유 쉽게 설명
1
863
1
안녕하세요 가상클래스 포지션 활용 질문드립니다
1
386
2
nav 태그
1
1129
1
css 선택자의 모든-선택자 우선순위가 중요한 이유 강의 내용중에서
1
545
1
강의자료는 어디서 받을 수 있나요?
1
348
1
before after 가상클래스(도형과 버튼 만들기, 포지션 활용) 01 강의 중 이미지 안 뜨는 문제요ㅠ.ㅠ
1
673
2
유튜브 영상 파일
1
300
1
모바일 css 작업(단위)
1
295
1
유튜브의 초급,중급 이론과는 어떤차이가 있나요?
1
260
1
선생님 질문이 있습니다. (float 속성)
1
262
1
파일다운로드와 관련하여
1
256
1
포지션(position) 속성(z-index와 포지션 속성 우선순위) 강의 질문있습니다.
1
401
1
오타(contaner)
1
241
1
float 속성을 설정했을 때 display: inline-block이 되는 것에 관련하여 질문이 있습니다.
1
2281
2
margin: auto;
1
354
1
label 태그의 사용법이 궁금합니다
1
352
2