CSS: Display div on hover

Question

Consider following HTML, I have a div class magic inside main. The magic class is hidden by default (with CSS display:none). I want to show the div class magic if the mouse goes anywhere in the main div. Can this be done with CSS only? or it has to use jQuery?

<div class="main">       
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        <div class="magic">
            Hello, world
        </div>
</div>

CSS:

.main{  
    width: 400px; 
    border:1px solid red;
}

.magic{
    display:none; 
    margin-top:10px; 
    background:yellow; 
    padding:5px;
}

jsFiddle: http://jsfiddle.net/uRrn8/1/

Thanks for any help.

Answer 1

.main:hover .magic{  
     display:block;
}

That should do it for you in most browsers. However IE6 can be very strict about not supporting the hover psuedo class for anything other than links. If you wish to support IE6 you will have to use a javascript helper function to fire the mouse enter events and a CSS class you can append to the items. Examples of this technique are available here.

Answer 2

yes write like this:

.main:hover .magic{  
    display:block
}

check this http://jsfiddle.net/sandeep/uRrn8/2/