Question

我的svg地图上有别针。当用户将鼠标放在其上时，我想制作显示引脚描述的应用程序。问题是，描述应该在鼠标位置。我已经完成了改变onMouseOver的颜色和使用所有不同的css参数进行操作的事情。但我有改变div位置的问题。

在我提出的代码的相同部分：

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

颜色正在发生变化。

但是当我这样做时：

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

没有任何反应。

我正在尝试所有这些解决方案：

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

还有很多其他人，但我不知道它为什么不起作用。

我的jQuery代码：

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

});

}）;

根据我的django模板中的对象动态创建div。

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

我很长时间都在挣扎。有人可以帮忙吗？

Answer 1

left，right，top，bottom属性不适用于静态的默认位置值。你应该给位置：绝对/相对。在这种情况下，最好的一个是绝对的。

Answer 2

我解决了。解决方案很简单。

mouseX + "px";

在我的CSS中我需要提出：

position: absolute;

jQuery更改div位置onMouseOver

2 个答案: