Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

Nifty CSS Link Hover Effect

This nifty CSS link hover effect magically reveals a hidden span of text after specified links. The trick employs an anonymous span nested within an anchor tag. CSS then acts upon the markup with a set of rules that basically says hide the nested span until the link is hovered.

Here is a basic Demo »

Here is the CSS code and XHTML markup that makes it happen:

a:link, a:visited {
	text-decoration: underline;
	color: #990000;
}

a:hover, a:active {
	text-decoration: none;
	color: #990000;
}

li a:link span, li a:visited span {
	display: none;
}

li a:hover span, li a:active span {
	display: inline;
}
<ul>
	<li><a href="#">Here is a nice link <span> &raquo; select this item</span></a></li>
	<li><a href="#">Here is a nice link <span> &raquo; select this item</span></a></li>
	<li><a href="#">Here is a nice link <span> &raquo; select this item</span></a></li>
</ul>

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
Archives
[ Comments are closed for this post ]