jQuery更改div位置onMouseOver

我有svg贴图上的针脚。我想让应用程序显示引脚的描述，当用户将鼠标放在上面时。事情是，说明应该在鼠标位置。我已经做了一些事情，比如改变颜色onMouseOver和使用所有不同的css参数进行操作。但我在改变div位置方面存在问题。jQuery更改div位置onMouseOver

在相同的代码部分，当我把：

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

});

}）;

divs是根据我的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); 
}

我很长时间在挣扎。谁能帮忙？

来源

2016-04-21 user3131037

您是否尝试过'position：absolute;'然后添加实际位置？你也忘了'''在你的jQuery中，它应该是'$（“＃test”）'如果它是ID – Lucas

你试图通过'style.left =“更改'style.left = 100;'' 100px“;'？ –

style.left =“100px”的作品，最后发生了一些事情:) 但我不知道如何用mouseX和mouseY变量做到这一点？ p.s.设置绝对位置不会有帮助 – user3131037

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

mouseX + "px";

和我的CSS我需要把：

position: absolute;

来源

2016-04-21 14:04:39 user3131037

左，右，上，下性能不会随默认的位置值是静态的工作。你应该给位置：绝对/相对。在这种情况下最好给的是绝对的。

来源

2016-04-21 14:19:27

jQuery更改div位置onMouseOver

回答

相关问题