css - 父级鼠标悬停时可见隐藏的子 div

Question

当悬停在默认隐藏的父 div 上时，如何使子 div visibility:visible？

<div class="parent">
    <div class="child1">A</div>
    <div class="child2">B</div>
    <div class="child3" style = "visibility:hidden">C</div>
</div>

在上面的代码中，我希望 child3 在鼠标悬停在 div.parent 上时可见

Answer 1

将:hover 事件附加到.parent，选择子.child3 并更改其visibility 属性到可见。

.parent > .child3 {
  visibility: hidden;
}
.parent:hover > .child3 {
  visibility: visible;
}

<div class="parent">
    <div class="child1">A</div>
    <div class="child2">B</div>
    <div class="child3">C</div>
</div>

---

您也可以使用 :last-of-type 选择器来选择最后一个 child 。这样您就不必使用不同的类。

.parent > .child:last-of-type {
  visibility: hidden;
}
.parent:hover > .child:last-of-type {
  visibility: visible;
}

<div class="parent">
    <div class="child">A</div>
    <div class="child">B</div>
    <div class="child">C</div>
</div>