如何使用 jquery 将 div 定位在鼠标悬停中的图像旁边？答案

【问题标题】：how do i position a div just beside the image in mouseover using jquery?如何使用 jquery 将 div 定位在鼠标悬停中的图像旁边？
【发布时间】：2014-10-30 05:43:04
【问题描述】：

我设法使用 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

【问题讨论】：

使用纯 CSS (position: absolute) 相对于圆圈定位潜水。然后，在悬停时显示它。
能否提供dis的fiddle链接，以便我们给出精准的解决方案
看看这个 [jsfiddle] jsfiddle.net/3mdszohq
我也喜欢 div 在我将鼠标悬停在它上面之前不会消失，这样我仍然可以点击其中的链接。

标签： javascript jquery css svg mouseover

【解决方案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。

【讨论】：

谢谢我试过了，但还是不行。我设法制作了一个 jsfiddle [jsfiddle] jsfiddle.net/3mdszohq
非常感谢您修复我的代码。我还遇到了另一个问题，抱歉我忘了将它添加到我的问题中。是否有可能在鼠标没有指向圆圈和 div 之前，div 不会淡出？因为 div 上有一个链接，用户可以在点击它时继续该链接。
请检查新的jsFiddle。我认为这将解决您的问题。
以前的代码在鼠标移出时出现问题。它没有删除父级的 innerHTML。所以我创建了新的jsFiddle 请检查并使用。