当悬停拇指时，图像不显示

问题描述：

我遇到了问题，我的功能在jQuery中。它是一个简单的悬停事件灯箱。在控制台中没有出现错误，但它确定，但不能在悬停缩略图时显示我的大图像。当悬停拇指时，图像不显示

CSS 

.lightbox a img { 
    border: 0; 
    display: block; 
} 
.lightbox a { 
    display: inline-block; 
    border: 3px solid #ccc; 
} 
#largeImage { 
    position: absolute; 
    padding: .5em; 
    background-color: #e3e3e3; 
    border: 1px solid #bfbfbf; 
}

在webkit中测试。

这是我的功能。

<div class="lightbox"> 
    <a href="images/img4-lg.jpg" title=""><img src="images/img4-thumb.jpg" alt="Image"></a> 
    <a href="images/img5-lg.jpg" title=""><img src="images/img5-thumb.jpg" alt="Image"></a> 
</div> 

    /* 
    * Lightbox 
    */ 

    var offsetY = 10; 
    var offsetX = 20; 

    $('.lightbox a').hover(function(event) { 

     /* Stuff to do when the mouse enters the element */ 
     var href = $(this).attr('href'); 

     $('<img id="largeImage" href="'+ href +'"/>') 
     .css('top', event.pageY + offsetY) 
     .css('left', event.pageX + offsetX) 
     .appendTo('body'); 

    }, function() { 

     /* Stuff to do when the mouse leaves the element */ 
     $('#largeImage').remove(); 

    }); 

    $('.lightbox a').mousemove(function(event) { 

     /* Act on the event */ 
     $('#largeImage') 
     .css('top', event.pageY + offsetY) 
     .css('left', event.pageX + offsetX); 
    });

答

尝试包裹在此代码...

$(document).ready(function() { 
    //Your Code 
});

另外，你记得导入jQuery库？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

当悬停拇指时，图像不显示

相关推荐