Question

期望的结果：我只想查看我当前悬停的表行的隐藏文本（一组链接）。

问题：我看到包含id blog_title的每一行的链接（这是此特定代码所期望的）。

这是我当前的代码段：

$("td:has(#blog_title)").hover(function () {
            $('.hidden').show();
        }, function () {
            $('.hidden').hide();
        });

我觉得这里缺少一些简单的东西。我正在学习jQuery（非常缓慢，因为我很少使用它），并且希望朝着正确的方向发展。我在想我需要在某处使用$（this），但不确定如何实现。

Answer 1

尝试使用jQuery find()方法（如果.hidden元素只是表行的直接子级，则尝试使用children()）

    $("td:has(#blog_title)").hover(function () {
        $(this).find('.hidden').show();
    }, function () {
        $(this).find('.hidden').hide();
    });

Answer 2

实际上可以使用CSS来实现。像

table tr .hidden {
  opacity: 0;
  visibility: hidden;
}

table tr:hover .hidden {
  opacity: 1;
  visibility: visible;
}

这样，您就无需使用jQuery，甚至可以为不透明度添加过渡效果。这就是为什么我不使用display: none / display: block的原因。

使用jQuery在悬停时显示链接

2 个答案: