hover에 따라 주고싶은 element 스타일링하기

ex1) 인접한 경우

<div class="a">
  <div>hover me</div>
</div>
<div class="b">
  <div>style me</div>
</div>

.a:hover + .b > div {
    background: #ccc
}

Ex2) 인접하지 않은 경우

<div class="a">
  <div>hover me</div>
</div>
<div>hello</div>
<div>world</div>
<div class="b">
  <div>style me</div>
</div>

.a:hover ~ .b > div {
    background: #ccc
}

Ex3) parent to child

<div class="parent">
  hover me
  <div class="child">style me</div>
</div>

.parent:hover .child {
  color: yellow
}

Ex3) child to parent

<div class="parent">
  style me
  <div class="child">hover me</div>
</div>

div.parent {  
    pointer-events: none;
}
 
div.child {
    pointer-events: auto;
}
 
div.parent:hover {
    background: yellow;
}