Im trying to change the first child, when i hover on the second child. How do you do this with html and css only?

(With the tilde/~ i seem to be able to select childeren downwards in the html code, but not upwards. Do i have to use a different selector to go upwards?)

grtz

```
<div id="container">
        <div id="box1"></div>
        <div id="box2"></div>
</div>

<style>
   #box1 {
      height: 100px;
      width: 100px;
      background-color: red;
   }

   #box2 {
      height: 100px;
      width: 100px;
      background-color: lime;
   }

   #box2:hover ~ #box1 {
      height: 300px;
      width: 300px;
      background-color: yellow;
   }

</style>

```