當懸停拇指時，圖像不顯示

我遇到了問題，我的功能在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); 
    });

來源

2014-10-27 user3911545

嘗試包裹在此代碼...

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

另外，你記得導入jQuery庫？

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

來源

2014-10-27 19:36:10

當懸停拇指時，圖像不顯示

回答

相關問題