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

Question

I am working on a PHP project in which I am trying to show an image preview after mouse hover. 我正在一个PHP项目中，尝试在鼠标悬停后显示图像预览。 I am trying it with JS script, but it's not working as intended. 我正在尝试使用JS脚本，但无法正常工作。 I have to pass the image URL in a for loop depending upon name of file. 我必须根据文件名在for循环中传递图像URL。 I am seeing the preview always. 我总是看到预览。

Code: 码：

<!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

The following css code sets the display for a class test , but there is only an id test in here <img id='test' src='PATH/to/image.png'>Name</img> : 以下CSS代码设置了class test的显示，但此处<img id='test' src='PATH/to/image.png'>Name</img>仅存在一个id test ：

.test{
    display: none;
}

Since the images are created in a loop it should be a class not an id. 由于图像是在循环中创建的，因此应该是一个类而不是id。

And your Javascript Code $('#image').hide(); 还有您的Javascript代码$('#image').hide(); is used for an id image , which is nowhere to find in your code. 用于id image ，该代码在您的代码中找不到。

So either there is some code missing in your question, or the above might be your problem. 因此，您的问题中可能缺少某些代码，或者以上可能是您的问题。

Edit: Your hover also is triggered by a span tag, which is nowhere to find. 编辑：您的悬停也由无处可寻的span标签触发。 And if you have changed the test to an class, you have to use $('.test').show(); 而且，如果您将test更改为类，则必须使用$('.test').show();

Edit 2: 编辑2：

Here is a js example of how to do it with a td hover and show only the image which is inside it: 这是一个js例子，说明如何使用td悬停操作并仅显示其中的图像：

HTML / PHP PART: 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: 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