jquery - リンクにカーソルを合わせると、画像がループ表示されます

Question

現在、ギャラリー用のサイトを作成中です。簡単なリスト形式の展示会の表があり、ユーザーが展示会のタイトルにカーソルを合わせるとプレビュー画像が表示され、マウスを離すと消えます。

私はWordpressを使用しており、すべてのコア構造が整っています:

私は自分のテーブルを持っています 1つの画像を絶対に表示し、何も表示しないように設定しました 展示のタイトルと画像の両方に独自の投稿クラスを追加しました

両方をリンクすることはできないようです。

これは、これまでのところ、うまくいくと思っていた私のjQueryです。

$('table#archive-table td a').hover(
    var className = $(this).attr('class');
    function () {
        $('body.archive .first-show-image.'className).fadeIn('slow');
    },
    function () {
        $('body.archive .first-show-image.'className).fadeOut('slow');
    }
);

HTML の例:

<a class="33" href="#">Palomar</a>
<div class="first-show-image 33">
  <div class="grid_2">
    <img src="test.png" />
  </div>
</div>
<a class="48" href="#">Palomar #2</a>
<div class="first-show-image 48">
  <div class="grid_2">
    <img src="test.png" />
  </div>
</div>

乾杯、R