How to affect other elements when one element is hovered

Question

What I want to do is when one div is hovered, it affects the properties of another div.

For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but I want The thing is, when I hover over #container, #cube is affected.

div {
  outline: 1px solid red;
}

#container {
  width: 200px;
  height: 30px;
}

#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}

#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">
  <div id="cube">
  </div>
</div>

Answer 1

In this specific example you can use:

#container:hover #cube {
    background-color: yellow;   
}

This example only works if cube is a child of container. For more complex scenarios, you'll need to use different CSS, or use JavaScript.

Answer 2

If the cube is directly inside the container:

#container:hover > #cube { background-color: yellow; }

If the cube is located next to the container (after the container's closing tag):

#container:hover + #cube { background-color: yellow; }

If the cube is located somewhere inside the container:

#container:hover #cube { background-color: yellow; }

If the cube is a sibling of the container:

#container:hover ~ #cube { background-color: yellow; }