Jquery 在网页中的悬停上方弹出

我试图在用户将鼠标悬停在链接上时以弹出方式创建一个子块。我找不到一个合适的方法来获得下面提供的图像这样的显示。此外，我想使该子块可点击和可行。我正在使用bootstrap和jquery进行尝试，但是，我对这些领域还比较陌生，不确定我到底应该做什么。谁能帮我做这件事吗

---

如果您只是使用悬停（而不是单击），则可以使用CSS完成所有操作。例如：

.hoverbox {
    position: absolute;
    background: #ddd;
    padding: 4px;
    width: 200px;
    display: none;
}
a:hover + .hoverbox, .hoverbox:hover { display: block }

只需将其设置为隐藏，然后在其悬停时将其取消隐藏，或者在其后面跟随悬停的链接

可以使用包装器div（.hoveroutside）增加悬停区域：

---

您有3个步骤要做：构建块，识别悬停事件，然后将块放置在触发悬停事件的链接附近并可视化

一,- 你可以用一个div来构建你的块，这个div包含所有你的块内容，并且最初有一个

display:none

prop和一个

z-index

prop，它能够覆盖你显示块时最初可视化的HTML元素

二,- 使用JQuery获取所需链接元素上的悬停事件，获取元素的x、y位置（使用偏移量）

三,- 使用JavaScript或JQuery方法，使用步骤2中获得的值设置块div的“绝对位置”。

---

在div块上应用show方法。

@“Sirnath Sridhar”类似于抱歉，我的意思是这有助于引导吗？我尝试了以下代码。但它不起作用。我哪里做错了？Home code.jquery.com/jquery-1.10.2.js“>code.jquery.com/ui/1.11.4/jquery ui.js”>$（“[data toggle=popover]”）.popover（）；我试着运行脚本。但我无法隐藏它。所以在我将其悬停之前，内容会显示出来。。。。

.hoverbox {
    background: #ddd;
    padding: 4px;
    width: 200px;
}
.hoveroutside {
    position: absolute;
    top: 4px;
    left: 0px;
    padding: 20px;
    display: none;
    border: 1px solid red; /* Just for you to see */
}
a:hover + .hoveroutside, .hoveroutside:hover { display: block }