How to affect other elements when one element is hovered

Question

What I want to do is when a certain `div` is hovered, it'd affect the properties of another `div`. For example, in this JSFiddle demo, when you hover over `#cube` it changes the `background-color` but what I want is that 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; } ``` ```

```

Accepted Answer

If the cube is directly inside the container:

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

If cube is next to (after containers closing tag) the container:

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

If the cube is 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; }
```

How to affect other elements when one element is hovered

Solution

Problem