PHP，JS：鼠標懸停預覽不起作用，默認情況下始終顯示圖像

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的顯示，但此處<img id='test' src='PATH/to/image.png'>Name</img>僅存在一個id test ：

.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部分：

$(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 個解決方案

解決方案1
1 已采納 2019-02-19 11:57:43

PHP，JS：鼠標懸停預覽不起作用，默認情況下始終顯示圖像

問題描述

1 個解決方案

解決方案1 1 已采納 2019-02-19 11:57:43

解決方案1
1 已采納 2019-02-19 11:57:43