如何在div中使用jquery在mouseover旁邊定位div？

Question

我設法做了一個鼠標，使用jQuery。其中我聲明一個div裏面

nodeEnter.append("circle") 
.attr("r", 30) 
.style("stroke", "white") 
.style("stroke-width", 4) 
.attr("fill", "url(#img)") 
.on("mouseover", function(d) { 
    0; 

    div.transition() 
     .duration(500) 
     .style("opacity", .9) 


    div.html(
     "<div id='hover'>" + 
     "<div>" + 
     "<div>" + 
     "<div>" + 
     "<div class='g-hover-card'>" + 
     "<img src='" + d.cover + "' alt='' />" + 
     "<div class='user-avatar'>" + 
     "<img src='" + d.img + "' alt='' />" + 
     "</div>" + 
     "<div class='info'>" + 
     "<div class='description'>" + 
     "<font size='5px'>" + d.name + "</font>" + "<br /><font color='black'>" + d.relationship + "</font>" + 

     "</div>" + 
     "</div>" + 
     "<div class='bottom'>" + 
     "<br/>" + 
     "<a onclick=\"window.open('http://facebook.com/" + d.id + ");\" rel='publisher' class='btn btn-primary btn-block'>" + "Follow on Facebook" + 
     "</a>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" 

    ) 

}) 

.on("mouseout", function(d) { 
    div.transition() 
     .duration(500) 
     .style("opacity", 0); 
}); 

因此，當我在圓上懸停在div表明它只是其不位於圓旁邊。它在屏幕的左上角。我怎樣才能把它放在圓圈附近？

這裏http://jsfiddle.net/3mdszohq

Answer 1

檢查我重寫了上jsFiddle你的代碼。我希望這會幫助你解決問題：

nodeEnter.append("circle") 
.attr("r", 30) 
.style("stroke", "white") 
.style("stroke-width", 4) 
.attr("fill", "url(#img)") 
.on("mouseover", function(d) { 

    circlePos = this.getBoundingClientRect(); 

    div.transition() 
     .duration(500) 
     .style("opacity", .9) 
     .style("left", (circlePos.left + circlePos.width + window.scrollX) + 'px') 
     .style("top", (circlePos.top + window.scrollY) + 'px') 
     .style("position", "absolute") 


    div.html(
     "<div >" + 
     "<div>" + 
     "<div>" + 
     "<div>" + 
     "<div class='g-hover-card'>" + 
     "<img src='" + d.cover + "' alt='' />" + 
     "<div class='user-avatar'>" + 
     "<img src='" + d.img + "' alt='' />" + 
     "</div>" + 
     "<div class='info'>" + 
     "<div class='description'>" + 
     "<font size='5px'>" + d.name + "</font>" + "<br /><font color='black'>" + d.relationship + "</font>" + 

     "</div>" + 
     "</div>" + 
     "<div class='bottom'>" + 
     "<br/>" + 
     "<a onclick=\"window.open('http://facebook.com/" + d.id + ");\" rel='publisher' class='btn btn-primary btn-block'>" + "Follow on Facebook" + 
     "</a>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" 

    ) 

}) 

.on("mouseout", function(d) { 
    div.transition() 
     .duration(500) 
     .style("opacity", 0); 
}); 

Code Demo。