Jqueryを使って画像サムネイルにロールオーバーしたときに、半透明の

質問

Jqueryを使って画像サムネイルにロールオーバーしたときに、半透明の画像と情報を載せたいと思っております。
WPを利用しているのでサムネイル一覧は自動で生成されます。
サムネイルを生成している上に半透明のpng画像を背景にした情報セットをPositionで載せるところまでは完成しています。
jqueryで上に載る情報をまとめたCSSにdisplayを追加させることでロールオーバーもできました。

ですが、自動生成している一覧のclass名が全て同じなため、サムネイルの一つにマウスを合わせると全ての画像が反転してしまいます。
どうしたら、マウスを合わせた画像のみロールオーバーできるようになりますか？

よろしくお願いいたします。

【JSソース】
$(function(){
$("li.item dl dt.thm").mouseover(function(){
$("li.item dl dt.thm a.overImg").css("display","block");});

$("li.item dl dt.thm").mouseout( function() {
$("li.item dl dt.thm a.overImg").css("display","none");});
});

【HTML】
<ul class="lists">
<li class="item">
<dl>
<dt class="thm">
<a href=""><img src="～～ /></a>
<a href="" class="overImg">
<span class="name01">タイトル</span>
<span>サイズ</span>
<span class="date">日付</span>
</a>
</dt>
<dd>>情報１</dd>
<dd>情報２</dd>
</dl>
～～～
</ul>

【CSS】
.lists .item .thm{
position: relative;
height: 100px;
width: 150px;
margin: 0 0 10px 0;
border: 1px solid #ebebeb;
-moz-box-shadow: 2px 2px 5px #cccccc;
-webkit-box-shadow: 2px 2px 5px #cccccc;
}

.lists .item .thm a.overImg{
position: absolute;
background: url(../images/thumbnail_over.png) no-repeat right bottom;
height: 80px;
width: 130px;
left: 0px;
top: 0px;
padding: 10px;
display: block;
text-decoration: none;
display: none;
}

.lists .item .thm a.overImg span{
font-size: 11px;
display: block;
width: 130px;
margin-bottom: 5px;
color: #666666;
text-shadow: #ffffff 1px 1px 3px;
height: 15px;
overflow: hidden;
}

.lists .item .thm a.overImg span.name02{
font-weight: bold;
font-size: 14px;
}

.lists .item .thm a.overImg span.date{
position: absolute;
leftt: 0;
bottom: 0;
}

回答No.1

mtaka2 · ベストアンサー

イベント処理関数の中では、処理対象のエレメントがthisに入っていますから、その配下にあるエレメントだけを処理対象にすればいいかと思います。
試してませんが、たぶん
---
$("li.item dl dt.thm").mouseover(function(){
$("a.overImg", this).css("display","block");});

$("li.item dl dt.thm").mouseout( function() {
$("a.overImg", this).css("display","none");});
---
こんな感じでいけるはず。

$("a.overImg", this).css で、
thisには $("li.item dl dt.htm")で見つけた要素のうち、mouseover/mouseout で処理対象となっているエレメントが入っているので、
その下の "a.overImg" だけがcss を書き換える処理対象になります。

お礼

mtaka2様
ありがとうございます！！
完璧です！

その後、class+"thm"に個別の番号を振って、classにしてやればいいのかなと
.eachをつかって番号を振り、thmを一度削除、thm+iで新しいclassを付与してみた。
たしかに新しいclassはできたのですが、class="thm1 thm2・・・"と一覧の数だけついてしまってガックリとしていたところでした。（苦笑）

迅速な回答ありがとうございました！