jQuery改变div位置onMouseOver答案

【问题标题】：jQuery change div position onMouseOverjQuery改变div位置onMouseOver
【发布时间】：2016-04-21 13:46:44
【问题描述】：

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

});

});

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

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

我为此苦苦挣扎了很长时间。有人可以帮忙吗？

【问题讨论】：

你试过position:absolute;然后加上实际位置吗？您还忘记了 JQuery 中的 #，如果它是 ID，则应该是 $("#test")
您是否尝试将style.left=100; 更改为style.left="100px"; ？
style.left="100px" 有效，终于发生了一些事情:) 但我不知道如何使用 mouseX 和 mouseY 变量来做到这一点？ p.s.设置绝对位置没有帮助

标签： javascript jquery html css django

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

mouseX + "px";

我需要在我的 css 中添加：

position: absolute;

【讨论】：