サイト内検索
...タグ・小技・etc...
ロールオーバー
cssを使って（背景色→背景画像）
[サンプル]
マウスを近づけると背景色から背景画像へ変わります。- ［メモ］
- imageと指定することが、ポイントです
- display: block; が必要です。
- width・heightを書いておくことも忘れずに
- 背景色「background-color:」を背景画像「background: url(img/sample.png);」 へ
- 背景画像「background: url(img/sample.png);」を背景色「background-color:」へ
- 変えることもできます
「ホームページ作成HACウェブデザイン」を参照にさせて頂きました。
背景色・背景画像の変化については、こちらをご覧ください。
サンプルのソース
[スタイルシート]
#image a{color: #999999;
display: block;
width: 200px;
height: 40px;
background-color: #f1d8fa;
text-decoration: none;
line-height: 40px;
text-align: center;
}
#image a:hover{
color: #000000;
background: url(../../img/sample.gif) no-repeat;
}
[ｂｏｄｙの中]
<div id="image"><a href="sample1.html">sample1</a>
<br />
<a href="sample1.html">sample1</a>
</div>
