父元素鼠标悬停时显示隐藏的子元素div

Question

如何在默认情况下隐藏父元素的情况下，当鼠标悬停在父元素上时，使子元素的可见性为visible？

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

从上面的代码中，我希望在鼠标悬停在div.parent上时显示child3。

- ram

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>

- Weafs.py

---

你应该像chipChocolate建议的那样，将“visibility:hidden”移至你的CSS文件中，不要在HTML中内联使用。如果由于某些原因必须内联使用，则需要将悬停设置为“visibility: visible !important;”以强制覆盖内联样式，但这不是一个好习惯。 - Rhumborl