jquery - Div 元素不会在 JQuery 中重新定位

Question

我正在尝试使用 JQuery 在我的代码中重新定位一个 div 元素，因为该元素一直出现在页面的左下角。相反，我希望元素出现在鼠标位置。这是我的代码:

var count=0;
$( '.DropsLineNotes' ).each(function(){
    count++;

    var hoverText = $(this).find( '.notesText' ).html();
    //creating overlay
    $overlay = $( '<div>' ).attr('id', 'overlay'+count)
                .appendTo( 'body' )
                .show()
                .html(hoverText);

    console.log(hoverText)

    var $image = $( '<img>' ).attr({
        src: 'http://vignette2.wikia.nocookie.net/runescapefanfiction/images/d/d5/DropsLine_info.png/revision/latest?cb=20150822080442',
        alt: 'Info'
    }),
        $link = $( '<span>' ).append( $image )
        .on("mouseenter", function(){
            //get mouse co-ords
            var currentMousePos = { x: -1, y: -1 };
            $(document).mousemove(function(event) {
                currentMousePos.x = event.pageX;
                currentMousePos.y = event.pageY;
            });

            $('#overlay'+count).css({'left': currentMousePos.x, 'top': currentMousePos.y, 'background-color':"yellow"}).fadeIn(200);
            console.log("overlay should appear")
        })
        .on("mouseleave", function() {
            console.log("fading out");
            $('#overlay'+count).fadeOut(10000);
        });

    $( this ).append( $link );
})

我确定下面的行会定位 div 元素，但它什么也没做。我知道选择器选择了正确的元素，因为元素的背景颜色按要求变为黄色。

$('#overlay'+count).css({'left': currentMousePos.x, 'top': currentMousePos.y, 'background-color':"yellow"}).fadeIn(200);

Answer 1

您需要使用 position:absolute 或 position:fixed 将其按 top 或 left 值定位.确保 css 在 css 中具有位置值。

或者你也可以通过 jquery 来完成:

$('#overlay'+count).css({'position':'absolute', 'left': currentMousePos.x, 'top': currentMousePos.y, 'background-color':"yellow"}).fadeIn(200);