隐藏的子 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 属性更改为visible。

.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 选择器来选择最后一个孩子。这样您就不必使用不同的类。

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