Question

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

我更改了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>';

Answer 1

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

然后，在mousehover事件上，做一个简单的

$("#previewDiv").show()

然后

$("#previewDiv").hide()

在myMouseOut上再次隐藏它？

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

1 个答案: