Javascript PHP，JS：鼠标悬停预览不工作，默认情况下始终显示图像

我正在做一个PHP项目，我试图在鼠标悬停后显示一个图像预览。我正在用JS脚本进行尝试，但它没有按预期工作。我必须根据文件名在for循环中传递图像URL。我一直在看预告片

代码：

.测试{
显示：无；
}
.下划线{
文字装饰：下划线；
}
以下css代码设置了
类测试的显示
，但此处
名称
中只有
id测试
：

因为图像是在循环中创建的，所以它应该是一个类而不是一个id

以及您的Javascript代码$（'#image'）.hide（）

用于

id图像

，在代码中找不到该图像

因此，您的问题中可能缺少一些代码，或者以上可能是您的问题

编辑： 您的悬停也会由一个

span

标记触发，该标记找不到。如果将

测试更改为类，则必须使用
$（'.test'）.show（）

编辑2：

下面是一个js示例，演示如何使用td悬停并仅显示其中的图像：

HTML/PHP部分：

foreach($files as $key) {
        echo "
            <tr class='label-loop'>
                <td class='counter' align='left' width='100' >
                    <a class='label-loop' align='left' href='/send-email.php?fileName=$key'>
                        $counter
                    </a>
                </td>
                <td class='click loop' align='center' width='500'>
                    <a class='loop' align='right' href='/send-email.php?fileName=$key'>
                        $key
                    </a>
                    <img class='test' src='PATH/to/image.png'>
                </td>    
            </tr>
        ";

        $counter++;
    }

我已将img参数从id更改为class，但保留了名称测试。我已将JS代码更改为$（'#test'）.show（）；分别藏起来。我仍然没有在悬停时获得任何图像。实际上，我想在悬停在TD上时显示图像。。可能吗？我刚刚额外添加了这个img部分。谢谢。我编辑了答案。如果你想把它放在
td-hover上，你必须使用
$（'td'）。hover我尝试了你的修改。仍然不起作用。我的意思是，我想在TD上悬停时显示图像。那么如何在TD中添加图像源呢？TD当前正在显示文件名。谢谢。我刚刚认出你的
img标签
在
tr标签
内，但周围没有
td标签
。为什么不将
img部件
移动到其中一个
td标签内
？
.test{
    display: none;
}

foreach($files as $key) {
        echo "
            <tr class='label-loop'>
                <td class='counter' align='left' width='100' >
                    <a class='label-loop' align='left' href='/send-email.php?fileName=$key'>
                        $counter
                    </a>
                </td>
                <td class='click loop' align='center' width='500'>
                    <a class='loop' align='right' href='/send-email.php?fileName=$key'>
                        $key
                    </a>
                    <img class='test' src='PATH/to/image.png'>
                </td>    
            </tr>
        ";

        $counter++;
    }

$(document).ready(function () {
        $('td.click').hover(function(){
            $(this).addClass('underline'); //to make text underlined on hover
            $(this).find(".test").show(); //displays image on mouse in
        },function(){
            $(this).removeClass('underline'); //remove underline on mouse out
            $(this).find(".test").hide(); //hides image on mouse out
        });
    });