jQuery更改div位置onMouseOver

Question

I have the svg map with pins on it. I want to make the application that shows the description of the pin, when user put the mouse on it. The thing is, that the description should be in the mouse position. I've already done things like changing color onMouseOver and manipulate with all different css parameters. But I have problem with changing the div position.

In the same part of code when I put:

document.getElementById("test").style.color = "red";

the color is changing.

but when I do this:

document.getElementById("test").style.left = 500;

nothing happens.

I was trying with all those solution:

$("test").css({top: 200, left: 200});

and lots of others, but I have no idea why it doesnt work.

my jQuery code:

jQuery(document).ready(function() {
    jQuery('img.svg').each(function(){
        var mouseX;
        var mouseY;
        var $img = jQuery(this);
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function (data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find('svg');

        // Replace image with new SVG
        $img.replaceWith($svg);

        // Add an handler
        jQuery('#pins path').each(function () {


            jQuery(this).click(function () {
                var post_slug = jQuery(this).attr('id');
                var url = "http://127.0.0.1:8000/posts/post_slug".replace("post_slug", post_slug); //TODO
                window.location = url;
            });
            jQuery(this).mouseover(function (e) {
                mouseX = e.pageX;
                mouseY = e.pageY;
                var post_slug = jQuery(this).attr('id');
                // using string concat due to name conficts with "path id" in svg map
                //document.getElementById("popup_".concat(post_slug)).style.display = 'block';
                document.getElementById("popup_".concat(post_slug)).style.top = mouseY;
                document.getElementById("popup_".concat(post_slug)).style.left = mouseX;
                document.getElementById("popup_".concat(post_slug)).style.color = "red";
            });
            jQuery(this).mouseout(function () {
                var post_slug = jQuery(this).attr('id');
                // using string concat due to name conficts with "path id" in svg map
                document.getElementById("popup_".concat(post_slug)).style.display = 'none';
            });
        });
    });

});

});

The divs are dynamically created according to objects in my django template.

for (var i = 0; i < pin_slugs.length; i++) {
    var popup = document.createElement("div");
    popup.id = "popup_".concat(pin_slugs[i]);
    popup.title = pin_slugs[i];
    popup.innerHTML = pin_slugs[i];
    document.body.appendChild(popup);
}

I'm struggling with it for a long time. Can anyone help?

Answer 1

left, right, top, bottom properties will not work with default position value which is static. You should give position:absolute/relative. Best one to give in this scenario is absolute.

Answer 2

I solved it out. The solution was simple.

mouseX + "px";

and in my css I needed to put:

position: absolute;