Hi guys,

 

I am trying to get the #north_america_text div to show when the #north_america_image div is hovered over.

 

 

Here is some test code I am using

<div id="north_america">
     <div id="north_america_image">
     </div>
     <div id="north_america_text">
     </div>
</div> 

 

CSS

I've just used absolute positioning for testing, all will be floated etc later if I can get it to work.

 

#north_america	{
height:150px;
width:125px;
border:1px solid #fff;
position:absolute;
top:150px;
left:150px;
position:relative;
}

#north_america_image	{
height:80px;
width:125px;
position:absolute;
top:0px;
left:0px;
border:1px solid #F00;

}
#north_america_text	{
width:125px;
height:30px;
border:1px solid #0F0;
visibility:hidden;
position:absolute;
bottom:0px;
left:0px;

}

div#north_america_image:hover div#north_america_text {
visibility:visible;
} 

 

This doesn't work, what does?!

 

Cheers

Edited January 18, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

The reason it doesn't work is your selector targets a div called #north_america_text which is a descendant of #north_america_image, whereas in your markup they're siblings.

Renaissance-Design is saying use your CSS with this markup:-

<div id="north_america">
     <div id="north_america_image">
     <!--</div> deleted-->
     <div id="north_america_text">
     </div>   
     </div><!--from above-->
</div> 

 

Add temporary background colors to every style to see what is happening.

#north_america	{   background: #ddd;
height:150px;
width:125px;
border:1px solid #fff;
position:absolute;
top:150px;
left:150px;
position:relative;
}

#north_america_image	{  background: pink;
height:80px;
width:125px;
position:absolute;
top:0px;
left:0px;
border:1px solid #F00;

}
#north_america_text	{ background: yellow;
width:125px;
height:30px;
border:1px solid #0F0;
visibility:hidden;
position:absolute;
bottom:0px;
left:0px;

}

div#north_america_image:hover div#north_america_text {
visibility:visible;
} 

 

It looks a bit better if you edit #north_america height: 150px; to height: 80px so that it doesn't extend below the image div. Also if you want the text div to show just below the image div, edit #north_america_text delete bottom: 0; and add top: 80px; but I'm not quite sure what you want.

Edited January 18, 201214 yr by Wickham