CODEWITHSUNDEEP
css
ram
ram

Reputation: 2343

Hidden child div visible on mouseover of parent

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

Upvotes: 8

Views: 5919

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

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>

Upvotes: 16

Related Questions