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.

PCasagrande · Accepted Answer · 2011-10-13 15:59:00Z

4

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

edited Oct 13, 2011 at 15:59

answered Oct 13, 2011 at 12:20

PCasagrande

5,4123 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rtpHarry Over a year ago

One side note is that this will not work in IE6 unless you use a fix such as blog.delivi.com/javascript/…

PCasagrande Over a year ago

That is true. IE6 is very spotty on their support for psuedo classes like hover. I am updating it to include your link. Thank you for reminding me.

sandeep · Accepted Answer · 2011-10-13 12:19:43Z

2

yes write like this:

.main:hover .magic{  
    display:block
}

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

answered Oct 13, 2011 at 12:19

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

3 Comments

rtpHarry Over a year ago

One side note is that this will not work in IE6 unless you use a fix such as blog.delivi.com/javascript/…

sandeep Over a year ago

@rtpharry; every buddy knows that & whooooooooo cares IE6

rtpHarry Over a year ago

probably your client or your clients customer that says "is that google" when you ask them what web browser they use.

Nicola Peluchetti · Accepted Answer · 2011-10-13 12:21:55Z

2

With jquery you could do:

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

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

answered Oct 13, 2011 at 12:21

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Comments

Rob · Accepted Answer · 2011-10-13 12:21:58Z

1

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.

answered Oct 13, 2011 at 12:21

Rob

6,90914 gold badges55 silver badges92 bronze badges

Collectives™ on Stack Overflow

CSS: Display div on hover

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related