将悬停应用于父类的多级子级答案

【问题标题】：Apply hover to multi level childrens of parent class将悬停应用于父类的多级子级
【发布时间】：2020-02-27 14:06:21
【问题描述】：

我正在使用全局 css 将悬停效果应用于父类及其多级子类。我的代码是

<div className="parentCard" id="#parentCard">
    <div className="child1Card" id = "#child1Card">
        <div className="c11">
            <h2 className="cardTitle"> its Challenge</h2>
        </div>
        <div className="c12">
            <IoIosLogIn className="iconStyle" />
        </div>
    </div>
    <div className="child2Card" id = "#child2Card">
        <p className="cardContent"> contentnaskjndfv anfvoiernvweov on owiervni</p>
    </div>    
</div>

我将css应用到上面的div上

.parentCard:hover{
    background:linear-gradient(to right, #ff6f00, #ff9100);
    color:#ffffff;
    cursor: pointer;
 }

以上代码不适用于“c11”子类。谁能告诉我我的代码有什么问题，谢谢

【问题讨论】：

className 是什么？如果您使用普通的HTML，请使用class
我正在使用 react js，这就是 className 存在的原因。
你在使用 sass
不，我没有使用 sass

标签： css reactjs hover

【解决方案1】：

你错误地写了类名而不是类。我从 html 中的 className 更改了类。如果您同意，您可以检查它。谢谢

.parentCard {-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.parentCard:hover{background:linear-gradient(to right, #ff6f00, #ff9100);color:#ffffff;cursor: pointer;}

<div class="parentCard" id="#parentCard">
   <div class="child1Card" id = "#child1Card">
   <div class="c11">
       <h2 class="cardTitle"> its Challenge</h2>
   </div>
   </div>
   <div class="child2Card" id = "#child2Card">
      <p class="cardContent"> contentnaskjndfv anfvoiernvweov on owiervni</p>
   </div>    
</div>

【讨论】：

我不太确定这一点。 OP 可能正在使用 React。
我使用的是 react js 而不是普通的 html。
哦，我明白了，不知道反应js。谢谢

【解决方案2】：

仅基于我对您的问题的理解，当您将鼠标悬停在父类上时，可能会在 c11 类上添加相同的样式。请检查以下代码：

.parentCard:hover,
.parentCard:hover .c11 {
  background:linear-gradient(to right, #ff6f00, #ff9100);
  color:#ffffff;
  cursor: pointer;
}

【讨论】：

@MahiGunjal - 很高兴它有帮助:)