|
|
<!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;} /* アクティブなリンク */
<!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;
}