Hidden child div visible on mouseover of parent

Question

How to make visibility:visible of a child div when hover on parent div which is hidden by default ?

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

From above code i want child3 to be visible on mouse over of div.parent

Answer 1

Attach a :hover event to .parent, select the child .child3 and change its visibility property to 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>

---

You could also do this using :last-of-type selector to select the last child. This way you won't have to use different classes.

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