freoのメニューでカーソルを近づけると背景色が変わるようにする

2011/01/14 10:12
カテゴリー：カスタムテンプレート
タグ：freoCSS

表示のサンプルはこちら

css/default.css のメニュー部分を以下のとおりに変更します。

div#menu {
  display: inline-block;
  background-color: #666666;
}
div#menu h2 {
  display: none;
}
div#menu ul, div#menu ul li, div#menu a {
  display: block;
  margin: 0;
  padding: 0;
}
div#menu ul li {
  float: left;
  list-style: none;
  white-space: nowrap;
}
div#menu a:link, div#menu a:visited {
  color: #FFFFFF;
  text-decoration: none;
  background: transparent;
  padding: 4px 10px;
}
div#menu a:active, div#menu a:hover {
  color: #FFFFFF;
  background-color: #008B45;
}
div#menu:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Hides from IE-mac ¥*/
 * html div#menu {height: 1%}
        div#menu {display: block;}
/* End hide from IE-mac */

これでメニューの各項目にカーソルを近づけると項目の背景色が緑色に変わります。
背景色を変更したい場合は上記の太字部分（#008B45）のところを適宜変更してください。

コメント登録

コメントを入力してください。
一旦登録したコメントは、あとで編集できませんのでご注意下さい。

名前

メールアドレス

URL

コメント（コメント本文の装飾について）

コメント本文の装飾について

本文に特定の記号を書くことにより、手軽にマークアップを行うことができます。

引用

概要

文章を >> だけの行と << だけの行で囲うと引用に変換します。

入力例

この部分は通常の文章です。
>>
ここは引用になります。
<<
この部分は通常の文章です。

結果

この部分は通常の文章です。

ここは引用になります。

この部分は通常の文章です。

整形コード

概要

文章を >|| だけの行と ||< だけの行で囲うと整形コードに変換します。プログラムの掲載時に利用すると読みやすくなります。

入力例

この部分は通常の文章です。
>||
<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>
||<
この部分は通常の文章です。

結果

この部分は通常の文章です。

<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>

この部分は通常の文章です。

閲覧制限

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

freoをカタカナ3文字で入力してください（スパム対策）

登録者情報を記憶する

日	月	火	水	木	金	土
-	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	-	-	-	-

freoカスタマイズ集