Hide child div element on hover

Question

Is there any way to make this work. I want to hover over an external divand hide a child element without using javascript. Is this possible?

.fullwrap:nth-child(1):hover { 
    display: none; 
}

+3

riotgear Feb 04 '14 at 14:44

1 answer

Danip · Accepted Answer · 2014-02-04T14:50:35+0000

To hide the child, you need a structure like this:

#parent:hover .yourchild {
   display:none;
}

Where #parentis your external divand has an action :hover, then you just map the child to hide it.

In this case, I think you have a structure like this:

<div class="fullwrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Then, to hide the child, you can do the following:

.fullwrap:hover :nth-child(1) { 
  display: none; 
}