HTML Dog
Skip to navigation

Rollovers 2

Further interactive effects, utilizing the :active pseudo class.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Rollovers 2</title>
	<style>
	body {
		font: 12px arial, helvetica, sans-serif;
	}

	div a {
		/* Note: Using 'div a' (targeting all a elements inside div elements) instead of simply 'a' (all a elements) so that this doesn't target the link back to HTML Dog at the bottom of the page */
		display: block;
		width: 200px;
		height: 63px;
		background-image: url(/examples/images/toucancombo2.jpg);
		text-indent: -999em;
		text-decoration: none;
	}

	a:hover {
		background-position: center;
	}

	a:active {
		background-position: bottom;
	}
	</style>
</head>
<body>
	<div>
		<p><a href="#">Toucan</a></p>
		<p><a href="#">Toucan</a></p>
		<p><a href="#">Toucan</a></p>
	</div>

	<!-- Link back to HTML Dog: -->
	<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original