Hide the child element of a div on hover

Question

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; 
}

Answer 1

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/