Ok, technically it’s not dynamic because you have to enter the text in the html so it’s not “created on the fly”. This is still a cool feature if you wanted a list of terms and have the definition pop up on the page as the visitor rolls over the definition. And the best part of this it’s pure CSS, no javascript. Once again, this is dynamic so it scales to the size of the page and it has been tested and works on IE, Chrome, Safari, and Firefox on a Win7 box. Your mileage may vary.
Without further ado, here’s the HTML and CSS as well as a link to a working example.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Rollover sample</title> <link href="rollover.css" rel="stylesheet" type="text/css" /> </head> <body > <div> <div></div> <ul> <li> item1 <div style="display:none"> this is the text associated with item1</div></li> <li> item2 <div style="display:none"> this is the text associated with item2</div></li> <li> item3 <div style="display:none"> this is the text associated with item3</div></li> <li> item4 <div style="display:none"> this is the text associated with item4</div></li> </ul> </div> </body> </html>
And the CSS:
@charset "utf-8";
/* CSS Document */
div.containter {
position:relative;
width:50%;
overflow:hidden;
}
/*this is just to mark out where the rollover text will show up*/
div.textbox{
background-color:#0f0;
width:50%;
position:absolute;
right:0px;
top: 0px;
padding-bottom: 999em;
margin-bottom: -999em;
border-left: solid 1px #000;
}
li:hover div {
display:block !important;
position: absolute;
left:50%;
top: 0px;
}
