サイト内検索
...スタイルシート(css)...
スタイルシート・リンク
ポイントしたときに文字を動かす（ロールオーバー）
- ポイントしたときに文字を動かすには、
疑似クラス（:hover）を指定したa要素に、positionプロパティを指定します。 - top・right・bottom・leftと組み合わせて指定します。
- position は、こちらをご覧下さい。
- [使い方]
- a:hover {
position: relative;
top: 5px;
left: 5px;
text-decoration: none;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| position: | relative | 通常の位置を基準とした相対的な位置を指定します。 |
| プロパティ名 | 値 | 説明 |
|---|---|---|
| top： | ; | 上からの距離を指定します。
「数値+単位」（例・・100px）を指定します。 単位は、「px」または「%」を指定します。 |
| right： | ; | 右からの距離を指定します。
「数値+単位」（例・・100px）を指定します。 単位は、「px」または「%」を指定します。 |
| bottom： | ; | 下からの距離を指定します。
「数値+単位」（例・・100px）を指定します。 単位は、「px」または「%」を指定します。 |
| left： | ; | 左からの距離を指定します。
「数値+単位」（例・・100px）を指定します。 単位は、「px」または「%」を指定します。 |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
a{
color: #9999dd;
}
a:hover {
position: relative;
top: 5px;
left: 5px;
color: #c9171e;
text-decoration: none;
}
-->
</style>
[ｂｏｄｙの中]
<a href="../../sample.html">ポイント時に文字が下がります。</a>[ブラウザ上]
