CSS: Display div on hover

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/开发者_如何学C1/

Thanks for any help.

.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.

yes write like this:

.main:hover .magic{  
    display:block
}

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

With jquery you could do:

$('.main').hover(function() {
    $('.magic').css('display', 'block');
},

function() {
    $('.magic').css('display', 'none');
});

Updated your fiddle, http://jsfiddle.net/uRrn8/4/

.main{width: 400px; border:1px solid red;}
.main:hover .magic{display:block;}
.magic{margin-top:10px; display:none; background:yellow; padding:5px;}

The code above should work. When hovering your div with the class main (.main:hover) you tell the div with the class magic to show.

this can be done with CSS only see http://www.clinic.ps I made it on my project see the menu hover If you want the code I can post it here