[tangerine_dreamer]

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

This post has been edited by Renaissance-Design: 18 January 2012 - 03:02 PM
Reason for edit: Please use the code button or tags to format your code.

[Renaissance-Design]

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.

[Wickham]

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.

This post has been edited by Wickham: 18 January 2012 - 04:03 PM