Appendix A. マウスを乗せると背景が変わるリンク。

マウスを乗せると画像が変わるリンク。

マウスを乗せると背景画像が変わるリンク。

マウスを乗せると背景が変わるリンク。
1. スタイルシートを使って背景色を変える。
2. スタイルシートを使ってリンクに小細工する。

サンプル#01　スタイルシートを使って背景色を変える。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>サンプル#01　スタイルシートを使って背景色を変える。</title>

<link rel="stylesheet" href="onmouse6.css" type="text/css">

</head>



<body>



<div class="block">

<a href="#">link1</a>

<a href="#">link2</a>

<a href="#">link3</a>

<a href="#">link4</a>

<a href="#" class="r">link5</a>

</div>



</body>

</html>


/* onmouse6.css */

.block {width:500px}

.block a {

  display:block;

  width:99px;

  font-family:Arial, Helvetica, Osaka, sans-serif;

  text-align:center;

  background:#bbb;

  color:#333;

  float:left;

  border-right:1px solid #777;

  padding:7px 0;

}

.block a.r {width:100px; border:none;}   /* 上書き */



/* link */

.block a:link    {color:#333; text-decoration:none;}   /* リンク */

.block a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */

.block a:hover   {color:#fff; background:#777;}   /* ポイント時のリンク */

.block a:active  {color:#fff; background:#555;}   /* アクティブなリンク */

*1　この例では、a要素をブロック要素として背景色を指定しているため、文字を垂直方向にセンタリングすることができない欠点があります。そのためスタイルシートのpaddingプロパティを用いて文字の上下に7pxのパディング幅を確保し高さを設定しています。
*2　ieを除くブラウザにでは仕切りに背景を設定しても正しく認識されません。そのためa要素の右に1pxのボーダーを設定しています。

サンプル#02　スタイルシートを使ってリンクに小細工する。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>サンプル#02　スタイルシートを使ってリンクに小細工する。</title>

<link rel="stylesheet" href="onmouse7.css" type="text/css">

</head>



<body>



<div class="basic">

<h3>■ 通常のリンク</h3>

<a href="#">link1</a> |

<a href="#">link2</a> |

<a href="#">link3</a> |

<a href="#">link4</a> |

<a href="#">link5</a>

</div><br>



<div class="visit">

<h3>■ 訪問済みリンクの文字色を変更</h3>

<a href="#">link1</a> |

<a href="#">link2</a> |

<a href="#">link3</a> |

<a href="#">link4</a> |

<a href="#">link5</a>

</div><br>



<div class="decobg">

<h3>■ マウスが乗ったら下線と背景を表示</h3>

<a href="#">link1</a> |

<a href="#">link2</a> |

<a href="#">link3</a> |

<a href="#">link4</a> |

<a href="#">link5</a>

</div><br>



<div class="colorbg">

<h3>■ マウスが乗ったら文字色と背景を変更</h3>

<a href="#">link1</a> |

<a href="#">link2</a> |

<a href="#">link3</a> |

<a href="#">link4</a> |

<a href="#">link5</a>

</div><br>



<div class="borderbg">

<h3>■ マウスが乗ったら上下にボーダーと背景を表示</h3>

<a href="#">link1</a> |

<a href="#">link2</a> |

<a href="#">link3</a> |

<a href="#">link4</a> |

<a href="#">link5</a>

</div>



</body>

</html>


/* onmouse7.css */

h3 {margin:0; padding:0; font-size:small; color:#444;}



a {font-family:Arial, Helvetica, Osaka, sans-serif;}




/* 訪問済みリンクの文字色を変更 */

.visit a:link    {}   /* リンク */

.visit a:visited {color:orange;}   /* 訪問済みリンク */

.visit a:hover   {}   /* ポイント時のリンク */

.visit a:active  {}   /* アクティブなリンク */




/* マウスが乗ったら下線と背景を表示 */

.decobg a:link    {color:#069; text-decoration:none;}   /* リンク */

.decobg a:visited {color:#069; text-decoration:none;}   /* 訪問済みリンク */

.decobg a:hover   {color:#069; text-decoration:underline; background:#def;}   /* ポイント時のリンク */

.decobg a:active  {color:#069; text-decoration:underline; background:#def;}   /* アクティブなリンク */




/* マウスが乗ったら文字色と背景を変更 */

.colorbg a:link    {color:#333; background:#bbb; text-decoration:none;}   /* リンク */

.colorbg a:visited {color:#333; background:#bbb; text-decoration:none;}   /* 訪問済みリンク */

.colorbg a:hover   {color:#fff; background:#777; text-decoration:none;}   /* ポイント時のリンク */

.colorbg a:active  {color:#fff; background:#555; text-decoration:none;}   /* アクティブなリンク */




/* マウスが乗ったら上下にボーダーと背景を表示 */

.borderbg a:link    {color:#069; text-decoration:none;}   /* リンク */

.borderbg a:visited {color:#069; text-decoration:none;}   /* 訪問済みリンク */

.borderbg a:hover   {   /* ポイント時のリンク */

  color:#069;

  text-decoration:none;

  border-top:1px solid #069;

  border-bottom:1px solid #069;

  background:#def;

}

.borderbg a:active  {   /* アクティブなリンク */

  color:#069;

  text-decoration:none;

  border-top:1px solid #069;

  border-bottom:1px solid #069;

  background:#def;

}

Appendix A. マウスを乗せると背景が変わるリンク。

マウスを乗せると画像が変わるリンク。

サンプル#01 スタイルシートを使って背景色を変える。

サンプル#02 スタイルシートを使ってリンクに小細工する。

サンプル#01　スタイルシートを使って背景色を変える。

サンプル#02　スタイルシートを使ってリンクに小細工する。