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);

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

1 个答案: