JavaScriptを使わないでをロールオーバー

CSS

画像非表示時の何も読めなくなる対応を考えて、特にケータイの。

<a href="#"><img src="globalmenu02a.jpg" /></a>
img {
	border :		0 ;
	}

a:hover img {
	visibility :		hidden ;
	}
a {
	display :		block ;
	background-image :	url('globalmenu02d.jpg') ;
	width :			126px ;
	}

Ff,opera,NSはOK
IEがダメ


かと思っていたら

Lucky bag::blog: 「実践 Web Standards Design」という本を書きました
"7 章 XHTML&CSS Tips 10.visibility プロパティを利用して img 要素をロールオーバー"
http://www.lucky-bag.com/archives/2007/02/web-standards-design.html

IEの対応方法があった。

display :		             block ;
background-image :	url('globalmenu02d.jpg') ;
background-color :         white ;

background-color