マウスホバー中のアイテムをハイライトする
Result
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>
via
Simplest jQuery Spotlight Effect Tutorial | Queness