javascript - 我如何使用 jquery 在鼠标悬停图像旁边放置一个 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 .