Question

我在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);
     });

Answer 1

尝试将代码包装在此...

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

或者，你还记得导入jQuery库吗？

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

悬停拇指时不显示图像

1 个答案: