jquery - 悬停 parent 改变 child 的 child

Question

在下一个示例中，当我将鼠标悬停在完整的父 div 上时，我希望事情发生在我的子 div 上。例如:我希望 child1 的 h2 和 span 带有下划线，而 child2 的 span 改变颜色(但不是下划线!)。

纯 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