title: Change background of child if parent :hover
body: <p>I want to change the bg-color of <code>.circle.icon</code> if <code>posts-item</code> is hovered. Any idea how to accomplish that, possibly without Javascript?</p>
  
  <pre><code>&lt;div id="scr1" class="large-6 columns timeline"&gt;
      &lt;div class="line"&gt;&lt;/div&gt;
      &lt;ul class="posts"&gt;
          &lt;li class="posts-item"&gt;
              &lt;div class="circle icon"&gt;&lt;/div&gt;
               &lt;h2 class="posts-item-title"&gt;
                   &lt;a href=""&gt;&lt;/a&gt;
                &lt;/h2&gt;
              &lt;p class="summary"&gt;&lt;/p&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>