Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 cssだけでマウスオーバーで展開


先日(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<!--[if gte IE 7]><!--></a><!--<![endif]--><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><!--[if lte IE 6]
></a><![endif]-->
</li>

</ul>
<br class="clear" />
</div><!--album-->



もしメニューの文字をクリックしたら展開する
と言う場合は
「hover」ではなく「active」を使う
【2008/06/20 15:58】 html | トラックバック(0) |
コメント(0)

comment
投稿













管理者にだけ表示を許可する




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



| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview