CSS のお勉強：所謂、画像置換てやつ

• クリックしる
• 未訪問

上記のような、なんの変哲もないテキストリンクを画像で置換するやつね。

---

ソース

<ul class="alt">
<li><a href="textover2.html" title="クリックしる">クリックしる</a></li>
<li><a href="urn:nai" title="未訪問">未訪問</a></li>
</ul>

スタイルシート

ul.alt {
	margin : 0 ;
	padding : 0 ;
	list-style-type : none ;
}

ul.alt li {
	margin : 0 20px 20px 0  ;
	padding : 0 ;
	list-style-type : none ;
	float : left ;
}

ul.alt li a {
	display : block ;
	width : 80px ;
	height : 80px ;
	margin : 0 ;
	padding : 0 ;
	text-indent : -9999px ;
	background-repeat : no-repeat ;
	background-position : top center ;
	text-decoration : none ;
	overflow : hidden ;
}

ul.alt li a:link {
	color : blue ;
	background-image : url(link-b-link.png) ;
}

ul.alt li a:visited {
	color : purple ;
	background-image : url(link-b-visited.png) ;
}

ul.alt li a:hover {
	color : red ;
	background-image : url(link-b-hover.png) ;
	background-color : transparent ;
}

ul.alt li a:active {
	color : green ;
	background-image : url(link-b-active.png) ;
}