リンクやボタンにカーソルを乗せた時に、押し易くする方法 - CSSカスタマイズ
リンクやボタンは、カーソルを合わせた時に表示を変化させる事で、「押す事が出来ますよ。」と訪問者に伝える事が出来ます。以下、リンクの場合についてメモします。
**** 手順
o リンク文字も含めて適用したい時
----------------
a:hover {
/* マウスを乗せた時に、したい事を書きます */
}
----------------
o リンク内の画像だけに適用したい時
----------------
a:hover img {
/* マウスを乗せた時に、したい事を書きます */
}
----------------
o ご参考。他の方の a:hover説明ページ（HTMLクイックリファレンス） ▽http://www.htmq.com/selector/hover.shtml
+ a:linkなどと併用する時の注意事項が載っています。
**** 応用例。zoomeマイページ
** 例1. リンク画像を動かして、凹んだように見せかける
o 実際にto_dkのzoomeマイページで使っている方法です。
+ リンクと特定のボタンに適用しています。
+ zoome上部のリンクには影響を与えない書き方です。
----------------
.contents a:hover, .footer a:hover, .comment_info_btn input:hover, .url_info_str_button input:hover {
color: #911B1B; /* これはリンクの色指定 */
position:relative;
top: 1px;
left: -1px;
}
----------------
o これは動かす例ですが、他にも、「background-colorを使って、背景色を変更する」などの工夫が出来ます。
** 例2. マウスを乗せた時に、CSSで画像の透明度を変化させる
o この例では75%を指定していますが、このページは背景が濃いですので 80% (0.80)を使っています。
--------
a:hover img {
-ms-filter: "alpha(opacity=75)";
filter: alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}
--------
o 複数行で指定する事には理由があります。詳しくは、「CSSで透明度を指定する方法。opacity」をご覧下さい。
**** メモ
o 私は試していませんが、工夫次第で、マウスを乗せた時に別の画像を表示させる事も出来そうです。
+ 興味のある方は、Web検索。検索キーワードは「img css ロールオーバー」辺りです。
o この方法は、上手く出来ない場合もあります。同じ場所にリンクを2枚重ねている場合です。
+ zommeマイページでは、「マイクリップ一覧」ページが該当します。
+ このページの場合、上のリンクが下にあるリンクを覆っていますので、下のリンクの a:hoverは反応しません。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
多くのブラウザーで見栄えを合わせる
zoome マイページ。プレビューでの失敗例と対策
▼CSSを調べる
