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

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

Kameron · Accepted Answer · 2022-04-29T16:00:54.337

0

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>

edited Apr 29 '22 at 16:00

answered Apr 29 '22 at 15:54

Kameron

7,250
3
6
22

I already know this – Skkk Apr 29 '22 at 16:02
But special thanks for this... – Skkk Apr 29 '22 at 16:02
@Skkk I doubt that you already knew this based on how you were referencing your selectors. – Kameron Apr 29 '22 at 16:03
What i mean to say that when i hover on a parents child so that to apply changes on another parents child but verrrrry Thanks... – Skkk Apr 29 '22 at 16:03
Because i have to make the projects like this.... – Skkk Apr 29 '22 at 16:05
But i think we dont have to use > because all are ch8ldren of box......like this........................ button:hover + #h { color: green; font-size: 5rem; } – Skkk Apr 29 '22 at 16:13

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

1 Answers1