[TIL] 2023.02.20 최종 프로젝트 12day

마우스 오버 효과 중에서

마우스를 가져다대면 없던 글자가 생기는 효과를 해보려고 했다.

구조는 위와 같이 상위 컴포넌트 Tip에 하위 컴포넌트 TipComment을 두었다.

 

우선 하위 컴포넌트에 아래 사진과 같이 

opacity: 0 을 주어서 텍스트가 투명해져서 안보이게 하고

 

상위 컴포넌트에 아래 사진처럼

opacity: 1 을 주어서 텍스트가 마우스를 가져다댔을 때

불투명해져서 보이게 했다.

 

처음에는 밑에처럼 div태그 안에 hover을 입혔는데

이렇게 하니까 텍스트부분에만 마우스를 가져가대야

글자가 안보이다가 보였다.

왜 저렇게 되는지 생각해보니

상위 컴포넌트에 hover을 줘야되는데 하위 컴포넌트의

div 태그에 hover을 준 격이 되어버려서였다.