Alt-Web Design & Publishing
Pure CSS Disjointed Text Rollovers

Description:

Mouse over the List Items below to reveal absolutely positioned span text. This disjointed text method relies on pure CSS without need for JavaScript behaviors. Therefore, it will work even when JavaScript is disabled. Also works with the tab key for people who may be unable to use a mouse. Tested and works in FF2+, IE6+, Opera 9, Safari 3+ and Chrome.

Example:

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS Code

#rollover li a {
text-decoration:none;}

#rollover li a span {
visibility:hidden;
display:block;
position:absolute;
/**adjust disjointed text position in % or px**/
left:40%;
top:400px;
color:#666;
background-color:#CCFF99;
border: 2px solid silver;
padding: 5px; }

#rollover li a:hover span, #rollover li a:active span, #rollover li a:focus span {
visibility:visible;
}

#rollover li a:hover, #rollover li a:focus{
text-decoration: none;
color:#FF6600;
visibility:visible; }

 


Earn money from your website with Lunarpages Affiliate Program.
Lunarpages.com Web Hosting

HTML Code

<ul id="rollover">
<li><a href="#">Link Item 1<span>Item 1 Text Goes Here</span></a></li>
<li><a href="#">Link Item 2<span>Item 2 Text Goes Here</span></a></li>
<li><a href="#">Link Item 3<span>Item 3 Text Goes Here</span></a></li>
<li><a href="#">Link Item 4<span>Item 4 Text Goes Here</span></a></li>

</ul>

 
 

 

bookmarks

 

 

Lunarpages.com Web Hosting

 

Valid XHTML 1.0 Transitional    Valid CSS!

Demos:

CSS Templates: