Question

"<a " . $thumbs . " href=\"" . $url . "\" class=\"download\" rel=\"files/" . $dir . "/" . $file . "\" title=\"" . $alt . "\"   ".$hover." > </a>"

当鼠标悬停在该链接上时，会调用一个函数：

$hover = " onmouseover=\"showImageThumbnail(this, '".$url_thumb."')\"";

功能本身：

function showImageThumbnail(obj, url){          
    xOffset = 30;
    yOffset = 10;

    $.get(url, function(data) {
        $(obj).hover(function(e){

            $("body").append("<p id='screenshot'><img src='data:image/jpg;base64,"+ data +"' alt='Atsisiųsti' /></p>");                              
            $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
        },
        function(){ 
            $("#screenshot").remove();
        }); 
        $(obj).mousemove(function(e){
            $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
        });
    });
}

我的问题是我的功能无法正常工作，我需要悬停两次以使其正常工作。此功能类似于工具提示，它显示图像缩略图。我想，我需要删除.hover.方法，但之后我的功能根本不起作用或部分起作用（例如当光标离开链接时缩略图不会被删除）。有人可以帮我解决这个问题吗？

Answer 1

尝试进行以下更改

"<a " . $thumbs . " href=\"" . $url . "\" class=\"download\" rel=\"files/" . $dir . "/" . $file . "\" title=\"" . $alt . "\"   image=\"".$url_thumb."\" > </a>"

和

$(function() {
    var screenshot = $("<p id='screenshot'><img src='data:image/jpg;base64,"
            + data + "' alt='Atsisiusti' /></p>").hide()
            .appendTo('body');
    var img = $('img', screenshot);

    $('.download[image]').hover(function(e) {
            $.get($(this).attr('image'), function(data) {
                img.attr('src', 'data:image/jpg;base64,'
                                + data);
            });

            img.removeAttr('src');

            screenshot.css({
                'top' : (e.pageY - xOffset) + 'px',
                'left' : (e.pageX + yOffset) + 'px'
            }).fadeIn("fast");
        }, function() {
            screenshot.hide();
    }).mousemove(function(e) {
            screenshot.css({
                'top' : (e.pageY - xOffset) + 'px',
                'left' : (e.pageX + yOffset) + 'px'
            })
    });

})

onmouseover和jquery函数无法正常工作

1 个答案: