どりーみーｃｓｓだけでマウスオーバーで展開

先日（2008/06/11）の「CSS だけでサムネイルギャラリー」
のcssを勉強しました。
マウスオーバーで展開、更にサムネイル画像に触れると拡大
と言うところのCSSがだいたい解かりました。面白いですね。
忘れないように書いて置きます。
サンプル



CSS部分

 /*メニューの文字に触れたら展開する　ここから*/
  /*サムネイル画像が入るtable*/
.album ul :hover table{ 
 padding:0;
 margin-top:-2px;
 display:block;
 border:1px solid red;
 border-width:0px 1px 1px 1px;}

/* メニューの一個一個のtable   文字だけの囲みになった*/
.album ul li table {    
 margin:0;
 padding:0;
 display:none;
}

/*  transparentが背景色を透過させる指定*/
.album ul li a.set:hover {
background:transparent;    
}

/*  transparentが背景色を透過させる指定*/
.album ul li:hover a.set {  
background:transparent;    
}


 /*メニューの文字に触れたら展開する　ここまで*/



/*展開したサムネイル画像の上にマウスオーバーで拡大　ここから*/

.album ul li a.set:hover li a:hover
{
	background-color: #fff;
}

.album ul li a.set:hover li a:hover img{
	width:auto;
	height:auto;
position : absolute;
top: 15px;
left: 170px;
}
/*展開したサムネイル画像の上にマウスオーバーで拡大　ここまで*/

HTML部分
<div class="album">

<ul>
<li><a class="set" href="#nogo">アジアンタム#1</a><b></b>
<ins><table><tr><td>
<ul>
<li>
<a href="#"><img src="http://blog-imgs-27.fc2.com/d/r/e/dreamy/2008-6-9-38.jpg" alt="代替" width="50"
height="50" /></a>
</li>
</ul>
</td></tr></table></ins>
</li>

</ul>
<br class="clear" />
</div>

もしメニューの文字をクリックしたら展開する
と言う場合は
「hover」ではなく「active」を使う

どりーみー

ｃｓｓだけでマウスオーバーで展開

2008/06/20 15:58

comment

投稿

trackback

http://dreamy.blog2.fc2.com/tb.php/107-af5668c2