クエリで2つのidを渡してdivをフェードインする

Question

内部に隠れた画像を持つdivの行を作成しようとしています。ミッドトの上にマウスが移動してフェードアウトすると、画像がフェードインしてから消えます。私はjqueryで.hover関数を使って何かをする必要があることを知っています。

は例

<div id='1_1'> 
&midddot; 
<img src='image1_1.jpg' style='display:none'> 
</div> 
<div id='1_2'> 
&midddot; 
<img src='image1_2.jpg' style='display:none'> 
</div> 
<div id='1_3> 
&midddot; 
<img src='image1_3.jpg' style='display:none'> 
</div> 

について各div要素は、記事のページを表します。したがって、id = '1_3'の場合、行1、ページ3、またはid = '1_1'になります。

これを行うにはjqueryをどのように構造化するか分かりません。

参考までに、私は情報を出力するためにphp/mysqlを使用しています。したがって、上記のコードはその "while"ステートメントの1つのループになります。後続のループは行番号を増やします（id = "2_1"、 "2_2"など）。

ありがとうございました。

Answer 1

のような効果のためのjQueryで選択しやすいようにあなたのdiv要素にクラスを追加します。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("li.fade").hover(function(){ 
      $("img", this).fadeIn(); 
      $("img", this).fadeOut(); 
     }); 
    }); 
    </script> 

：

<div id='1_1' class='fade'> 
    &midddot; 
    <img src='image1_1.jpg' style='display:none'> 
</div> 
<div id='1_2' class='fade'> 
    &midddot; 
    <img src='image1_2.jpg' style='display:none'> 
</div> 
... 

はその後ホバー機能を使用します

Answer 2

使用mouseenter()とmouseleave()あなた​​とfadeIn()とともにthis