CSS 호버(hover) 시.. 다른 태그/엘리먼트에 CSS 적용 하기..

CSS 특정 태그 엘리먼트 호버 hover 시.. 다른 태그 엘리먼트에 CSS 꾸미기 적용 방법..

어떤 특정 '엘리먼트 A'에 hover 시켰을 때.. 그 "엘리먼트A" 말고.. 다른 엘리먼트B에 CSS 효과를 주고자 할 때.. 아래의 방법을 응용하기 바란다. 아래를 참조하여.. 자신의 마크업(markup)에 맞게 약간 수정하면 될 것 같다.

ex: x 엘리먼트와 y 엘리먼트가 있다고 가정할 때... x:hover {CSS} 형식으로 x에 css 효과를 주는데.. x에 hover했을 때 y 혹은 z 엘리먼트에 css 효과를 주고자 할 때 아래의 방법을 응용하면 된다.

x:hover + y{ css 문법 } 에서.. '+' 는 "인접 선택자"로.. 'x'를 hover 했을 때 x 바로 뒤에 있는.. 'y'엘리먼트에 css효과를 주겠다는 의미다. 그 외에.. ^, >, ~, ="" 또는 [attirbute] 등이 있는데.. 이것들도 알아두기 바란다. 말로 설명하려니 어렵다, 아래 예제와 설명을 참조하기 바란다.

How to affect other elements when one element is hovered
https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered

예제)
CSS)
div {  outline: 1px solid red; }
#container {  width: 200px;  height: 30px; }
#cube {  width: 30px;  height: 100%;  background-color: red; }
#cube:hover {  width: 30px; height: 100%; background-color: blue; }

마크업)

 

 

*위와 같이 마크업과 CSS가 있다고 가정할 때.. 아래 CSS 와 같이 CSS를 주면.. 호버hover 시.. 다른 영역에 있는 요소에 CSS를 를 줄 수 있다. (해보니까 잘 되더라..)

cube(A)와 container(B) 라는 각각의 요소가 있다고 할 때
*If the cube is directly inside the container: A가 B안에 바로 다음에 있을 때
#container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container: A가 B 밖에 있을 때
#container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container: A가 B안의 어딘가 있을 때 공란
#container:hover  #cube { background-color: yellow; } 

If the cube is a sibling of the container: A가 B의 자손일 때
#container:hover ~ #cube { background-color: yellow; }

참조:
https://wallel.com/css-%EC%86%8D%EC%84%B1-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A0%95%EB%A6%AC-css-attribute-selector/

https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048?fbclid=IwAR1t5pbamoOMW27T45Ca3scZe_OZ5uoBv5yviIlq_I9gbz-2cblYndgSpoc