Result
http://jsfiddle.net/kachibito/GeSTS/embedded/result,js,css,html
jQuery
$(document).ready(function () { //title属性を探してspan内に放り込む $('#items .item').each(function () { title = $(this).attr('title'); $(this).append('<span class="caption">' + title + '</span>'); $(this).attr('title',''); }); $('#items .item').hover( function () { //ホバー時に全てのアイテムを透過処理 $(this).siblings().css({'opacity': '0.1'}); //マウスが乗っかってるのだけ透過を戻してclass="effect"を追加 $(this).css({'opacity': '1.0'}).addClass('effect'); //さっきのspanをフェードイン $(this).children('.caption').fadeIn(); }, function () { //spanを隠す $(this).children('.caption').fadeOut(); } ); $('#items').mouseleave(function () { //マウスが外れたらリセットする $(this).children().fadeTo('100', '1.0').removeClass('effect'); }); });
css
body { font-family:arial; margin-top:70px; } img {border:none;} #items a { text-decoration:none; color:#666; } #items { width:786px; margin:0 auto; } #items .item { display:block; width:190px; height:120px; border:1px solid #ddd; float:left; position:relative; } #items .item .caption { position:absolute; top:80px; left:2px; padding:3px; font-size:10px; color:#fff; width:180px; display:none; background:#666; } .clear { clear:both; }
html
<div id="items"> <a class="item" href="javascript:void(0);" title="title01">Item01</a> <a class="item" href="javascript:void(0);" title="title02">Item02</a> <a class="item" href="javascript:void(0);" title="title03">Item03</a> <a class="item" href="javascript:void(0);" title="title04">Item04</a> </div> <div class="clear"></div>