Question

我正在一个PHP项目中，尝试在鼠标悬停后显示图像预览。我正在尝试使用JS脚本，但无法正常工作。我必须根据文件名在for循环中传递图像URL。我总是看到预览。

代码：

<!doctype html>
<html lang="en">
<head>
    <style>
        .test {
            display: none;
        }
        .underline {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<?php
    echo "
        <table align='center' class='loopblock'>
            <tr class='loop'> 
                <td>Template ID Client: $client_id </th>
            </tr>
    ";

    echo "<table align='center' class='loopblock'>";

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

    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>
                <img id='test' src='PATH/to/image.png'>
                    Name
                </img>
                <td class='click' align='center' width='500' class='loop'>
                    <a class='loop' align='right' href='/send-email.php?fileName=$key'>
                        $key
                    </a>
                </td>    
            </tr>
        ";

        $counter++;
    }

    echo"</table>";
?>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
    $(document).ready(function () {
        $('span').hover(function(){
            $(this).addClass('underline'); //to make text underlined on hover
            $('#image').show(); //displays image on mouse in
        },function(){
            $(this).removeClass('underline'); //remove underline on mouse out
            $('#image').hide(); //hides image on mouse out
        });
    });
</script>
</body>
</html>

Answer 1

以下css代码设置了class test的显示，但是这里id test中只有<img id='test' src='PATH/to/image.png'>Name</img>：

.test{
    display: none;
}

由于图像是在循环中创建的，因此应该是一个类，而不是id。

并且您的Javascript代码$('#image').hide();用于id image，这在您的代码中找不到。

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

编辑：您的悬停也由span标记触发，该标记无处可寻。而且，如果您将test更改为一个类，则必须使用$('.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++;
    }

JS PART：

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

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

1 个答案: