使用 jquery 更改鼠标悬停时显示的图像的位置答案

【问题标题】：Change the position of the image being shown on mouse hover using jquery使用 jquery 更改鼠标悬停时显示的图像的位置
【发布时间】：2013-04-04 07:27:35
【问题描述】：

当用户将鼠标悬停在拇指版本的图像上并且较大的图像随鼠标移动时，下面的代码会显示较大的图像。下面的代码有效，但它将图像定位在鼠标的右侧。我希望图像显示在鼠标上方的顶部中心。

我更改了 xOffset 和 yOffset 值，这将改变上下位置，并将图像向右移动，但不向左移动。

问题是如何修改代码以使悬停时出现的图像位于较小图像上方的顶部中心？

我正在通过 Google 使用最新的 jquery (1.9.1)：http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

jquery：

this.imagePreview = function(){
xOffset = 0;
yOffset = 20;

$("a.preview").hover(function(e){
    this.t = this.title;
    var url = $(this).attr('alt')
    this.title = "";
    var c = (this.t != "") ? "<span class='preview-title'>" + this.t : "</span>";
    $("body").append("<p id='preview'><img src='"+ url +"' alt='Image preview' />"+ c +"</p>");
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn(1000);
    },
    function(){
        this.title = this.t;
        $("#preview").remove();
    });
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

$(document).ready(function(){
    imagePreview();
});

html/php:

    echo '<div style="display:inline;float:left;margin: 10px 4px;">
        <div style="background-color: #DDD;height:100px;border: 1px solid #111;">';
            if ($spacer_flag == 0)
            {
                echo '
                <a href="/view.php?im='.$image_dbid.'&w='.$row['id'].'" title="'.$row['word'].'">
                <img class="preview"
                src="'.$t_show_this_image.'"
                alt="'.$x_show_this_image.'"
                >
                </a>';
            }
            else
            {
                echo '
                <a href="/reserve.php?w='.$row['id'].'" title="">
                <img
                src="'.$t_show_this_image.'"
                ></a>';
            }

            echo '
        </div>
    </div>';

【问题讨论】：

你能发布你的 HTML 吗？
@DeclanMcNulty - 添加了 html

标签： jquery mousemove jquery-hover

【解决方案1】：

您希望图像是静态的，而不是随着鼠标指针移动。如果是这种情况，如何添加一个包含您希望显示的图像的隐藏 div 并将其样式设置为 CSS 中较小图像上方的顶部中心。

然后，在鼠标悬停事件上，做一个简单的

$("#previewDiv").show()

然后

$("#previewDiv").hide()

在鼠标输出时再次隐藏它？

【讨论】：