HTML/CSS hover one object to make another change its attribute

Question

Hello and thank you all for taking a look in my problem: Here what i have :

#div1 {
  background: red;
  width: 200px;
  height: 200px;
}

#div2 {
  background: blue;
  width: 200px;
  height: 200px;
}

<div id="div1"></div>
<div id="div2"></div>

Now i wanna change div2's background into green by hovering div1, how do i do this only with css?

Update: i have a same question but another story:

--HTML--

<div id="div1"></div>

<div id="wrapper">
<div id="div2"></div>
</div>

--HTML--

--CSS--

#div1 {
      background: red;
      width: 200px;
      height: 200px;
    }

    #div2 {
      background: blue;
      width: 200px;
      height: 200px;
    }

    #wrapper{
      width:500px;
      height:500px;
    }

--CSS--

Figured :

#div1:hover + #wrapper #div2{
background:green;}

for some reason idk why #div1:hover + #div2 doesnt work

score 4 · Accepted Answer · answered Sep 18 '18 at 13:26

4

You can do it with the + css selector, which selects elements directly after the current element

div {
  height: 50px;
  width: 50px;
  border: 1px solid black;
}

#div1:hover+#div2 {
  background-color: green;
}

<div id="div1"></div>
<div id="div2"></div>

answered Sep 18 '18 at 13:26

Nick

3,231
2
28
50

i have updated another question, if ur free pls have a look – Hiệp Nguyễn Sep 18 '18 at 14:13

score 0 · Answer 2 · answered Sep 18 '18 at 13:27

0

Here you go. It is important though that you keep the HTML structure as it is.

#div1 {
  background: red;
  width: 200px;
  height: 200px;
}

#div2 {
  background: blue;
  width: 200px;
  height: 200px;
}

#div1:hover+#div2 {
  background: green;
}

<div id="div1"></div>
<div id="div2"></div>

answered Sep 18 '18 at 13:27

Gerard

15,418
5
30
52

i have updated another question, if ur free pls have a look – Hiệp Nguyễn Sep 18 '18 at 14:13

HTML/CSS hover one object to make another change its attribute

2 Answers2