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:
- Link Item 1Item 1 Text Goes Here
- Link Item 2Item 2 Text Goes Here
- Link Item 3Item 3 Text Goes Here
- Link Item 4Item 4 Text Goes Here
- Alt-Web Design & PublishingStandards Based Web Designers and Media Specialists
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;
}
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>
