Css problem how to apply changes when i hover a parents child element to another parents child element? [duplicate]

Question

What I am trying to do is that when I hover on the #box button I want to add font-size on h1 is the child element of #h

#box button:hover+#h #hi {
  color: green;
  font-size: 5rem;
}

#box button:hover~#h #hi {
  color: green;
  font-size: 5rem;
}

<div id="box">
  <button style="height:100px;width:100px;">Hover Me</button>
</div>
<div id="h">
  <h1 id="hi">HI IS THERE...</h1>
</div>

ITS NOT WORKING ....... I KNOW I HAVE TO REMOVE #box but I am trying to do it without removing the parent element... ...Read This....... What I am trying to do is that when I hover on button I want to add font-size on h1 that is the child element of #h

Answer 1

It's because your using ~ and #h and #hi are not siblings to the button. You will have to nest the #h parent within #box for them to be siblings then use the > selector to target #hi.

See below:

button:hover ~ #h > #hi {
  color: green;
  font-size: 5rem;
}

<div id="box">
  <button style="height:100px;width:100px;">Hover Me</button>
  <div id="h">
    <h1 id="hi">HI IS THERE...</h1>
  </div>
</div>