HTML & CSS

[HTML&CSS] CSS - a에 마우스를 올리면 인접동생 div가 나오게 하기!

isfp_yykkng 2022. 5. 6. 18:56

<a 태그의 문구에 마우스를 올리면 인접동생인 div가 나오게 하는 방법>

display : none 이었던 것을 display : block으로 바꾸기

 

[CSS] display : none => 이 속성을 이용해서 해당 엘리먼트가 안나오게 할 수 있음.

[CSS] ' ~ ' 선택자(해당 엘리먼트의 모든 동생 선택자) : 해당 엘리먼트 밑에 있는 모든 동생을 선택함.

       ex) a ~ div {

               ...

           }

[CSS] ' + ' 선택자 : 인접동생 선택자 (해당 엘리먼트의 가장 인접한 동생 하나만)

** 형, 부모 선택자는 없음!!

See the Pen Untitled by hoyeol0513 (@hoyeol0513) on CodePen.