css - 如果 parent 为 :hover，则更改 child 的背景

Question

如果悬停在 posts-item 上，我想更改 .circle.icon 的 bg-color。知道如何在没有 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>

Answer 1

像这样。

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

没有 jQuery - 每个人都很开心:)