Question

我目前正在为画廊建立一个网站。我有一个简单的列表格式的展览表，我所追求的是当用户将鼠标悬停在展览的标题上时，会出现预览图像，当您将其悬停时，它会消失。

我正在使用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

Answer 1

我不知道您的示例代码与实际代码的匹配程度，但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');
    }
);

Answer 2

$('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');
    }
);

Answer 3

看起来你正在定义一个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');
        }
    );

将鼠标悬停在链接上，图像显示为循环

3 个答案: