サイト内検索
...スタイルシート(css)...
スタイルシート・リンク
ポイントしたときの背景色・背景画像の指定
- ポイントしたときの背景色は、
疑似クラス（:hover）を指定したa要素に、 background-colorプロパティを指定します。 - ポイントしたときの背景画像は、
疑似クラス（:hover）を指定したa要素に、 backgroundプロパティを指定します。 - [使い方]
- a:hover {
background-color: #555555;
} - a:hover {
background: url(../../img/sample.png);
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| background-color: | ; |
16進数RGB値（例・・#fff000）
または カラーネーム（例・・red）を指定します。 |
| background: | url( ); |
「url(../../img/sample.png)」のように
表示する画像（URL）を指定します。 |
- 文字の装飾するには、「テキスト・文字の装飾」をご覧ください。
サンプル
背景色が付きます。
[ｈｅａｄの中]
<style type="text/css"><!--
.sample-1 a{
color: #9999dd;
display:block;
width: 300px;
height: 40px;
padding-top: 25px;
padding-left: 90px;
}
.sample-1 a:hover {
background-color: #fdcdff;
color: #999999;
}
-->
</style>
[ｂｏｄｙの中]
<div class="sample-1"><a href="../../sample-1.html">ポイント時に背景色が付きます。</a>
</div>
[ブラウザ上]
背景画像に変化します。
[ｈｅａｄの中]
<style type="text/css"><!--
.sample-2 a{
color: #888888;
display:block;
width: 200px;
height: 50px;
background-color: #fdcdff;
line-height:50px;
text-align:center;
}
.sample-2 a:hover {
color:#000009;
background:url(../../img/sample.png);
}
-->
</style>
[ｂｏｄｙの中]
<div class="sample-2"><a href="../../sample-2.html">背景画像に変化します。</a>
</div>
[ブラウザ上]
背景画像が変化します。
[ｈｅａｄの中]
<style type="text/css"><!--
.sample-3 a{
color: #999998;
display:block;
width:200px;
height:50px;
background:url(../../img/sample-1.png) no-repeat;
line-height:50px;
text-align:center;
}
.sample-3 a:hover {
color:#000009;
background:url(../../img/sample-2.png);
}
-->
</style>
[ｂｏｄｙの中]
<div class="sample-3"><a href="../../sample-3.html">背景画像が変化します。</a>
</div>
[ブラウザ上]
