徘徊父母改变孩子的孩子

Question

在下一个例子中，当我将鼠标悬停在完整的父div上时，我希望事情发生在我的孩子div上。例如：我希望child1的h2和span为下划线，child2的范围从颜色改变（但不是下划线！）。

纯css有可能吗？或者我应该考虑使用JQuery？如果是这样，你能帮我在Jquery中开始这个吗？

           <div class="parent">
                <a href="#">
                    <div class="child1">
                        <h2>text</h2>
                        <span>text</span>
                    </div>
                    <div class="child2">
                        <span>text</span>
                    </div>
                </a>
            </div>

Answer 1

可以使用CSS，因为你可以瞄准悬停的父母的孩子：

.parent:hover .child1 span, .parent:hover .child1 h2 {text-decoration: underline;}
.parent:hover .child2 span {color: red;}

FIDDLE