隐藏的儿童div在父母的鼠标悬停上可见

Question

当将鼠标悬停在默认隐藏的父div上时，如何使子div的可见性：可见？

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