Next Home  Prev
No,107 comment 0
先日(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分24秒/ html /コメント:0 /トラックバック:0/▲ページトップへ戻る

コメント


コメント index
    絵文字

    非公開コメント

    トラックバック:
    トラックバック URL
    →http://dreamy.blog2.fc2.com/tb.php/107-af5668c2

    Next Home  Prev

    カテゴリー

    どりーみー

    recent comment

    最新の記事

    月別アーカイブ

    recent trackback

    ブログ内検索

    RSSフィード

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

    TB_People

    カレンダー

    10 | 2018/11 | 12
    - - - - 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 -

    iconカテゴリ

    ブロとも一覧

    ブロとも申請フォーム

    この人とブロともになる

    リンク

     

    カテゴリー

    recent comment

    最新の記事

    月別アーカイブ

    recent trackback

    ブログ内検索

    RSSフィード

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

    TB_People

    カレンダー

    10 | 2018/11 | 12
    - - - - 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 -

    iconカテゴリ

    ブロとも一覧

    ブロとも申請フォーム

    この人とブロともになる

    リンク