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

Posted 2023-05-08

【中文标题】将父元素悬停到子标签元素后如何更改相同的css样式？

【英文标题】：How can to change same css style after hover parent to child tag element?

【发布时间】：2020-07-25 16:46:11

【问题描述】：

下面是我的html代码段，

<div class="div-builder">
    <div>
        <a href="#">
            <img src="/photos/20/Apple-Logo-icon.png"  >
        </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 类的任何级别子级。这个<img>标签根据上面的HTML代码段不是同级子标签，它可以是任何级别的子标签。

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

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

或者

如何实现这个点击事件而不是 jQuery 的悬停效果？

【问题讨论】：

我不明白你想要达到什么目的。你可以张贴想要的结果的图片吗？你想改变所有背景还是改变除 div-builders 之外的所有背景？

好的，你想让 .div-builder 的 CHILDREN 的背景在悬停时改变背景？

【参考方案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="#" >
          <img src="https://picsum.photos/id/4/300" >
        </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>

【参考方案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" >
            </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>

【讨论】：

我不会在父级 .div-builder 类 div 中添加额外的包装 。我该怎么做？

@OptimusPrime 可以添加类名吗？

标签中不加类名会更好。

@OptimusPrime 那么我认为你必须使用 javascript

【参考方案3】：

如果我对您的理解正确，您的任务是在光标悬停在元素上时更改元素的背景？ 如此简单的任务： 它可以通过CSS来实现 1.添加到CSS“：悬停” 像那样（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>