Study/css

hover했을때 다른 요소에 변화주기

더 멋진 세상을 꿈꾸는 개발자 2020. 5. 16. 20:51

큐브가 컨테이너 내부에 직접있는 경우

:#container:hover > #cube { background-color: yellow; }

 

큐브가 옆에 있으면 (컨테이너가 태그를 닫은 후) 컨테이너가 :

#container:hover + #cube { background-color: yellow; }

 

큐브가 컨테이너 내부에 있으면

#container:hover #cube { background-color: yellow; }

 

큐브가 컨테이너의 형제 인 경우 :

#container:hover ~ #cube { background-color: yellow; }

 

출처: https://www.it-swarm.dev/ko/html/div%EB%A5%BC-%EC%98%AC%EB%A0%B8%EC%9D%84-%EB%95%8C-%EB%8B%A4%EB%A5%B8-%EC%9A%94%EC%86%8C%EC%97%90-%EC%98%81%ED%96%A5%EC%9D%84-%EB%AF%B8%EC%B9%98%EB%8A%94-%EB%B0%A9%EB%B2%95/970201349/

 

html — div를 올렸을 때 다른 요소에 영향을 미치는 방법

다음은 특정 선택기를 고려하지 않고 기본 요소의 :hover 상태 만 사용하여 다른 요소에 영향을 줄 수있는 또 다른 아이디어입니다. 이를 위해 사용자 지정 속성 (CSS 변수)을 사용합니다. specificatio

www.it-swarm.dev