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。

如何使用jquery在mouseover中将图像放在图像旁边？

1 个答案: