如何在将父元素悬停到子标签元素后更改相同的 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 class 上时，我需要这样做，然后它的 css 背景颜色将根据以下 css 更改,

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

结果将如下图所示，

再次当我将鼠标悬停在 <img> 标签上时，它也应该将背景颜色更改为浅黄色，但同时 .div-builder class 背景颜色不会'不要像浅黄色。结果将如下图所示，

此处，<img> 标签可以是 .div-builder class 的任何级别子级。根据上面的HTML代码段，这个<img>标签不是同级子标签，它可以是任何级别的子标签。

同理，<h3> or <i> or <p> 标签背景色在鼠标悬停时变为淡黄色。但同时 .div-builder class 背景色不会变成浅黄色。将鼠标悬停在 <p> 标签上后，结果如下，

如何通过 CSS 实现悬停效果？

或

如何通过 jQuery 实现点击事件而不是悬停效果？

Answer 1

兄弟这是你的答案希望你喜欢。 https://codepen.io/Ultra_Hopeful/pen/MWawrGK

function hoveref() {
      $(".div-builder")
        .find("h3,i,p,img,a")
        .hover(
          function () {
            $(this).css("background", "SpringGreen");
            $(".div-builder").css("background", "initial");
          },
          function () {
            $(this).css("background", "initial");
            $(".div-builder").css("background", "SpringGreen");
          }
        );
    }
    function hoverafter() {
      $(".div-builder").css("background", "initial");
    }

<div class="div-builder" onmouseenter="hoveref()" onmouseleave="hoverafter()">
      <div>
        <a href="#" width="100%">
          <img src="https://picsum.photos/id/4/300" alt="Logo">
        </a>
        <h3 class="">Title</h3>
        <i>sub-title</i>
      </div>
      <hr />
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

像这样？

body {
    background-color: rgba(173, 173, 173, 0.9);
}


.div-builder {
    background: white;
}

.div-builder div:hover {
    background: red;
}

    <div class="div-builder">
        <div>
            <a href="#">
                <img src="https://static.javatpoint.com/htmlpages/images/html-tutorial.png" alt="Logo">
            </a>
        </div>
        <div>
            <h3>Title</h3>
        </div>

    <div>
         <i>sub-title</i>    
    </div>
        <hr/>
        <div>
            <p>Lorem Ispsum is simply dummy text of the printing and typesetting ...</p>
        </div>
    </div>

Answer 3

如果我理解正确的话，你的任务是当你的光标悬停在元素上时改变元素的背景？所以它的任务真的很简单：它可以通过 CSS 来实现 1.add 到 css ":hover" 像那样（p代表段落）

 p:hover {
      background-color: red;
      font-size: 20px;
 }

2.done:) [将 p 更改为您想要的任何 id \class]

changing background at hover 我希望能有所帮助

如果您想在鼠标悬停时更改胶囊元素

.hoverME:hover { background:red; }

然后用 div

扭曲元素

<div  class="hoverME">
<p>i will be warrped by red background</p>
<p>me too!! y</p>
</div>

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

How can to change same css style after hover parent to child tag element?

html

css

jquery

click

hover