将父元素悬停到子标记元素后如何更改相同的CSS样式？

Question

我下面有html代码段，

<div class="div-builder">
    <div>
        <a href="#">
            <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo">
        </a>
        <h3>Title</h3>
        <i>sub-title</i>
    </div>
    <hr/>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</p>
</div>

[当我将鼠标悬停在.div-builder类上时，它的css背景颜色将根据以下css进行更改，我需要这样做，

.div-builder{ background-color: lightyellow; }

结果将如下图所示，

同样，当我将鼠标悬停在<img>标记上时，也应该将背景颜色更改为浅黄色，但同时.div-builder类的背景颜色也不会变为浅黄色。结果将如下图所示，

这里，<img>标签可以是.div-builder类的任何级别的子级。根据上面的HTML代码段，此<img>标签不是同一级别的子标签，可以在任何级别的子标签中进行更改。

同样，<h3>或<i>或<p>标签的背景色在鼠标悬停时应更改为浅黄色。但是同时.div-builder类的背景色不会更改为浅黄色。将鼠标悬停在<p>标签上后，结果如下：

如何在CSS上悬停效果？

或

我该如何执行此点击事件，而不是使用jQuery的悬停效果？

Answer 1

Bro，这是您的答案，希望您喜欢。https://codepen.io/Ultra_Hopeful/pen/MWawrGK