PHP项目鼠标悬停图片预览失效，图片始终默认显示

我来帮你梳理下问题所在，一步步修复这个预览功能：

核心问题拆解 #

• 选择器不匹配+重复ID：你循环里所有图片都用了同一个id="test"，但HTML中ID必须唯一；同时JS里操作的是#image，和实际ID完全不对应，导致显示/隐藏逻辑根本没生效。
• 图片URL未动态绑定：你写死了src='PATH/to/image.png'，没有用循环中的$key来指向对应文件，自然没法显示正确的预览图。
• 表格结构错误：img直接放在<tr>里不符合表格规范，第一个表格里的<td>还用了</th>闭合，会导致页面布局混乱。
• hover绑定目标错误：JS里绑定的是span元素，但你的HTML里根本没有<span>，应该绑定到你要悬停的文件链接上。

修正后的完整代码 #

<!doctype html>
<html lang="en">
<head>
    <style>
        .preview-img { display: none; position: absolute; z-index: 100; max-width: 300px; }
        .underline { text-decoration: underline; }
        .loopblock { margin: 20px auto; }
        .label-loop { position: relative; }
    </style>
</head>
<body>
<?php 
echo "<table align='center' class='loopblock'>
        <tr class='loop'>
            <th>Template ID Client: $client_id </th>
        </tr>
      </table>";

$path = "/var/www/html/pdf/";
$files = array_diff(scandir($path), array('.', '..'));
$counter = 1;

echo "<table align='center' class='loopblock'>";
foreach($files as $key) {
    // 生成前端可访问的图片路径（对应服务器的/var/www/html/pdf/，前端路径为/pdf/）
    $imgUrl = "/pdf/$key";
    echo "
    <tr class='label-loop'>
        <td class='counter' align='left' width='100'>
            <a class='file-link' href='/send-email.php?fileName=$key'> $counter </a>
        </td>
        <td align='center' width='500'>
            <a class='file-link' href='/send-email.php?fileName=$key'> $key </a>
            <!-- 用类代替重复ID，确保每个预览图唯一关联 -->
            <img class='preview-img' src='$imgUrl' alt='Preview of $key'>
        </td>
    </tr>";
    $counter++;
}
echo"</table>";
?>

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(document).ready(function () {
    // 绑定到所有文件链接的hover事件
    $('.file-link').hover(function(){
        $(this).addClass('underline');
        // 找到当前链接相邻的预览图片并显示
        $(this).siblings('.preview-img').show();
    }, function(){
        $(this).removeClass('underline');
        // 隐藏对应的预览图片
        $(this).siblings('.preview-img').hide();
    });
});
</script>
</body>
</html>

关键修改说明 #

1. 解决ID冲突：把重复的id改成类.preview-img，通过siblings()方法精准找到当前链接对应的预览图，避免全局选择出错。
2. 动态绑定图片URL：用$imgUrl = "/pdf/$key"生成对应文件的前端访问路径，确保每个预览图指向正确的文件。
3. 修复表格结构：把img放到<td>内部，修正第一个表格里的标签闭合错误，保证页面布局正常。
4. 正确绑定hover事件：把事件绑定到.file-link类（所有文件链接），确保悬停时触发对应逻辑。
5. 优化预览样式：给预览图加position: absolute和z-index，让预览图悬浮在页面上方，避免打乱表格布局；添加max-width防止图片过大。

内容的提问来源于stack exchange，提问作者We are Borg