Skip to navigation

Rollovers 2

Further interactive effects, utilizing the :active pseudo class.


<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Rollovers 2</title>
	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;
		<p><a href="#">Toucan</a></p>
		<p><a href="#">Toucan</a></p>
		<p><a href="#">Toucan</a></p>

	<!-- Link back to HTML Dog: -->
	<p><a href=""><img src="" alt="HTML Dog"></a></p>


View original