Change background of child if parent :hover

css, css-selectors, parent-child

Solution

Like so.

.posts-item:hover .circle.icon {
    background: green;
}

No jQuery - Everyone's happy :)

Problem

I want to change the bg-color of `.circle.icon` if `posts-item` is hovered. Any idea how to accomplish that, possibly without Javascript? ``` <div id="scr1" class="large-6 columns timeline"> <div class="line"></div> <ul class="posts"> <li class="posts-item"> <div class="circle icon"></div> <h2 class="posts-item-title"> <a href=""></a> </h2> <p class="summary"></p> </li> </ul> </div> ```

Original source