10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<a href=”http://www.yahoo.co.jp”>Yahoo!JAPAN</a>

CSSソース

a:hover {background-color:gray;}

サンプル表示

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にリンクを張る時と同じように書けばOKです。

CSSソース

a:hover {background-color:色;}を指定します。
これは、リンク(a)の上にマウスカーソルが乗った時(hover)に、background-colorで指定した色にリンクの背景色が変わるという意味です。
上のサンプルでは、カーソルが乗った時に「灰色」に変える為に、CSSのa:hover {background-color:gray;}を指定しています。
ちなみに、灰色以外にしたい場合はgrayを他の色に変えればOKです。
例)
■緑色に変える
a:hover {color:green;}
■色コード#000000に変える
a:hover {color:#000000;}
[参考]色見本 – 色名称/カラーコード一覧

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>