マウスオーバーで詳細表示

■動作ブラウザ　【 IE:-　 NN:7.0　 Safari:1.0】　■CSSバージョン【-】
Internet Explorer Netscape Navigator Opera iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 7.x 2.x 1.x
Windows × × - × × × × × × × × ○ ○ - -
Macintosh × × × × - - × × × × × ○ ○ × ○
UNIX - - - - - - × × × × × ○ ○ - -

ポイント .type1 { clip:rect(一部だけの表示範囲を指定) }
.type1:hover { clip:rect(全部見えるように指定}
説　　明 マウスオーバーで隠れている部分を表示するにはclipを使います。あらかじめ見せたくない部分をclipを使って表示範囲を指定しておきます。範囲はrect(上 右 下 左)の順番に座標を指定します。マウスが載った場合はhoverを使い、clip範囲を全部見えるように指定しなおします。Internet Explorerではauto指定ができますが、他ブラウザでは正常に機能しないので座標値で指定します。
サンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>マウスオーバーで詳細表示</title>
<style type="text/css"><!--
.type1 {
position:absolute;
font-size:12px;
line-height:15px;
width:160px;
background-color:yellow;
clip:rect(0px 160px 15px 0px);
}
.type1:hover {
clip:rect(0px 160px 1500px 0px);
};
--></style>
</head>
<body>
<div class="type1">
■詳細情報<br>
　マウスを載せると、ここのメッセージが表示されます。これはClipを使って実現しています。
</div>
</body>
</html>
補足説明 なし

■サンプルを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!