Примените hover к многоуровневым детям родительского класса.

Question

Я применяю эффект наведения к родительскому классу и его многоуровневым дочерним классам, используя глобальный 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'. Может кто-нибудь сказать мне, что не так с моим кодом, спасибо

Answer 1

Вы ошиблись, чтобы написать имя класса вместо класса. Я изменил класс с className в html. Вы можете проверить это, если вы согласны. Спасибо

.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

Просто опирайтесь только на то, что я понимаю, на ваш вопрос, возможно, добавьте тот же стиль в класс c11, пока вы наводите курсор на родительский класс. Пожалуйста, проверьте код ниже:

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