Hide the child element of a div on hover

css, parent-child

Solution

To hide a child element you need an structure like this:

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

Where `#parent` is your outer `div` and has the `:hover` action, then you just match the child element to make it hide.

In this case I guess you have some structure like this:

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

Then to hide a child you can do some like this:

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

Check this Demo http://jsfiddle.net/55TWN/

Problem

Is there a way to make this work. I want to hover over the outer `div` and hide a child element without using javascript. Is something like this possible? ``` .fullwrap:nth-child(1):hover { display: none; } ```

Original source