將鼠標懸停在鏈接上，圖片顯示循環

我目前正在爲圖庫構建網站。我有一個簡單的列表格式的展覽桌，而我所追求的是當用戶懸停在展覽的標題上時，會出現預覽圖像，當您將鼠標懸停時，它會消失。將鼠標懸停在鏈接上，圖片顯示循環

我使用WordPress的，我有到位的所有核心結構：

我有我的表我有一個單一的圖像顯示，絕對和設置爲顯示無我加入了獨特的課程後既展覽的標題和形象

我似乎無法將它鏈接起來。

這是我的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

來源

2013-05-13 John the Painter

這不是很清楚的問題是什麼，你正在經歷。 – 2013-05-13 16:23:59

是否輸入了懸停代碼錯誤的示例代碼？我從來沒有見過以這種方式定義的變量... – TNCodeMonkey 2013-05-13 16:25:28

對不起。例如，如果將鼠標懸停在類別爲「33」的錨點上，則類別爲「33」的div將淡入。如果移除懸停，它將淡出。等等...... – 2013-05-13 16:25:29

我不知道如何接近你示例代碼與真實代碼相匹配，但JavaScript中存在錯誤。試試這個

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

來源

2013-05-13 16:25:28 Klors

它看起來像你正在定義一個變量，其中jquery期待功能。試試這個：

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

來源

2013-05-13 16:26:43 TNCodeMonkey

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

來源

2013-05-13 16:28:49

這就是工作。 @Klors和JEES的組合 - 謝謝你們。 – 2013-05-13 16:29:43

將鼠標懸停在鏈接上，圖片顯示循環

回答

相關問題