图片的jquery悬停效果答案

【问题标题】：jquery hover effect of image图片的jquery悬停效果
【发布时间】：2014-01-17 23:06:53
【问题描述】：

这是我的 jquery 代码

this.imagePreview = function(){ 

    xOffset = 8;
    yOffset = 20;

    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append(
            "<p id='preview'><img src='" 
            + this.href 
            + "' alt='Image preview' />" 
            + c 
            + "</p>"
        );                               
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    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");
    });         
};

// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

这是html代码

<a href="1.png" target="_blank" class="preview"><img src="1s.png"></a>

这是css代码

#preview{
    position: absolute;
    background: #333;
    padding: 5px;
    display: none;
    color: #fff;
}

这一切都在这个小提琴中 http://jsfiddle.net/56wk9/ （虽然我找不到适合这个小提琴的图像，但这段代码工作正常）

这段代码做了什么，它显示一个图像 1.png 悬停在另一个图像 1s.png 上

但由于此代码使用要显示为的图像

<a href="1.png" target="_blank" class="preview">

单击基本图像时，它会在新窗口中打开这个放大的图像。相反，我希望打开另一个网站而不是这个放大的图像。当我放置网页链接时，它不会显示悬停效果。

所有帮助都是金。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在链接中使用数据而不是 href。

例如

<a href=""http://www.somesite.com data="image-1s.png"><img ...></a>

然后，不要使用this.href，而是使用数据

$("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' />

Here's the updated fiddle

HTML

<a href="http://www.google.com" target="_blank" class="preview" data="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg"></a>

Javascript

this.imagePreview = function(){ 

        xOffset = 8;
        yOffset = 20;

    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' />"+ c +"</p>");                                 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    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");
    });         
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

CSS

#preview{
    position:absolute;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    /*box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);*/
}

【讨论】：