如何更改悬停父母的孩子的属性

Question

使用CSS，如何在父项悬停时更改子项的属性？

Answer 1

选择父元素并使用:hover伪类，然后选择要更改其属性的子项。

.wrp {
    padding: 15px;
}
.wrp:hover .hvr {
    background: #FFFF33;
}

<div class="wrp">
    <span class="hvr">Hover my parent</span>
</div>

Answer 2

＆＃13;

＆＃13;

.parent:hover .first-child {
  background: red;
}
.parent:hover .second-child {
  background: blue;
}
.parent:hover .third-child {
  background: green;
}

＆＃13;

<div class="parent">
  <div class="first-child">Lorem Ipsum</div>
  <div class="second-child">Lorem Ipsum</div>
  <div class="third-child">Lorem Ipsum</div>
</div>

＆＃13;

＆＃13;

＆＃13;