jQuery鼠标悬停在文本链接上显示图片

js代码：

 

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

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

 

css代码：

 

#screenshot{
 position:absolute;
 border:0px solid #ccc;
 background:#333;
 padding:2px;
 display:none;
 color:#fff;
 }

 

 

示例：

 

<a href="#" class="screenshot" rel="图片路径">链接文字</a>