作り方
欠陥・問題点見てのお楽しみ！このサイトの擬似フレームの考え方 土台を作って、透明フィルムを２つ用意し、重ねますって説明です。
作り方
問題点
参考サイトのご紹介等見てのお楽しみ！
このページのテクはJavaScriptを使いません。没になったテクニックです。問題アリのテクニックなので、問題を承知の上、お使いください。
見本はこのページです。このページの一番上にスクロールしてください。メニュー部分にマウスを乗せると、別の場所に説明が出ます。普通はJavaScriptを使うようなのですがＣＳＳだけでがんばってみました。説明を出す場所は２箇所でも３箇所でも簡単に増やせます。。
一箇所のみのリモートロールオーバーと同じ作りです。そして、クラス名に２箇所目である名前を入れます。オレンジ以外はｃｓｓだけでリモートロールオーバーと全く同じです。
<ul class="menu">
<li><a href="link1.html">メニュー1
<span class="setumei">オンマウス時に表示される説明1。<br></span>
<span class="setumei second">オンマウス時に表示される説明1-1。<br></span></a></li>
<li><a href="link2.html">メニュー2
<span class="setumei">オンマウス時に表示される説明2。<br></span>
<span class="setumei second">オンマウス時に表示される説明2-1。<br></span></a></li>
<li><a href="link3.html">メニュー3
<span class="setumei">マウスが乗った時に表示される説明3。<br></span>
<span class="setumei second">オンマウス時に表示される説明3-1。<br></span></a></li>
<li><a href="link4.html">メニュー4
<span class="setumei">説明4はマウスがメニューに乗らないと見えない。<br></span>
<span class="setumei second">オンマウス時に表示される説明4-1。<br></span></a></li>
<li><a href="#"><img src="img.jpg">
<span class="setumei"><img src="image.jpg">イメージも同じ</span>
<span class="setumei second">オンマウス時に表示される説明図-1。<br></span></a></li>
</ul>一箇所のみのリモートロールオーバーと同じ作りです。そして、クラス名に２箇所目である名前を入れます。オレンジ以外はｃｓｓだけでリモートロールオーバーと全く同じです。
.menu {
padding-top:200px; /*--重ならない程度に押し下げています。--*/
}
.menu a span { /*--オンマウスで表れる場所---*/
display:none; /*--最初は隠す。これがキモ。
検索エンジンに嫌われる理由でもある---*/
padding:5px;
}
.menu a:link{
color:#ff7f50; /*--文字色 マウスを乗せたくなる色を---*/
}
.menu a:visited{color:#000;}
.menu a:hover, .menu a:visited{ /*--ここから下、%使う時はIEに注意---*/
display:block;
text-decoration:none;
}
.menu a:hover .setumei { /*--オンマウスで表れる場所の指定---*/
display:block;
position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/
top:20px;
left:20em;
width:480px;
font-weight:bold;
color:#ff5900;
line-height:1.5em;
}
.menu a:hover .second { /*--オンマウスで表れる場所の指定---*/
top:20px;
left:5px;
width:230px;
}
html部でのclass="setumei second"はsetumeiとsecondの２つのクラスを指定したことになります。そして、setumeiとsecondの指定内容が重なるときは詳細度などが同じですので後から指示した値が優先されます。secondクラスで指定するのは場所がかぶらない位置にすることが必須なだけで、後はご自由にどうぞ