将悬停应用于 parent class 的多级子项

Question

我正在使用全局 css 将悬停效果应用于 parent class 及其多级 child classes。我的代码是

<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' child class。谁能告诉我我的代码有什么问题，谢谢

Answer 1

您写错了 classname 而不是 class。我在 html 中将 className 更改为 class。如果你同意，你可以检查它。谢谢

.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>

Answer 2

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

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

将悬停应用于 parent class 的多级子项

Apply hover to multi level childrens of parent class

css

hover

reactjs