リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ CSSでロールオーバー

CSS

CSSでロールオーバー

CSSで背景画像をロールオーバーさせるサンプル。弱点は背景画像で使用している為、プリントされない可能性が高い。

【サンプル】
サンプル

【方法】
一つの画像をずらして表示させる。リンク用のダミーテキストは非表示設定。
準備画像

【HTML記述サンプル】

<p><a href="http://riptac.net/" class="sample"><span>サンプル</span></a></p>

【CSS記述サンプル】

a.sample {
	background: url(sample.jpg);
	height: 100px;
	width: 200px;
	display:block;
}
a:hover.sample  {
	background: url(sample.jpg) 0px -100px;
}
a.sample span {
	display: none;
}
last update 2009.4.18
参考・出典等
WEB工房 きくちゃん

▲page top

topmemogalleryblogtestaboutmail
Copylight(C)2008 Riptac. All Rights Reserved.