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;
}
お礼
ありがとうございました。