サイト内検索
...スタイルシート(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」または「%」を指定します。 |
サンプル
[headの中]
<style type="text/css"><!--
a{
color: #9999dd;
}
a:hover {
position: relative;
top: 5px;
left: 5px;
color: #c9171e;
text-decoration: none;
}
-->
</style>
[bodyの中]
<a href="../../sample.html">ポイント時に文字が下がります。</a>[ブラウザ上]