弹出悬停在网页中

Question

当用户将鼠标悬停在链接上时，我尝试以弹出方式创建子块。我找不到像下图所示的显示器的正确方法。此外，我想使该子块可单击并且可行。我正在尝试使用bootstrap和jquery，但是，我在这些领域相当新，并且不确定我应该做什么。有人可以帮我解决这个问题吗？

Answer 1

如果您只是处理悬停（而非点击），您可以使用CSS完成所有操作。例如：

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

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

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

.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 }

Jsfiddle

Answer 2

您基本上需要执行3个步骤：构建块，识别悬停事件，然后在触发悬停事件的链接附近放置并可视化块。

1- 您可以使用包含所有块内容的div构建块，并且最初具有display: none道具和z-index道具，可以覆盖显示块时最初可视化的HTML元素。

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

3- 使用JavaScript或JQuery方法使用您在步骤2中获得的值设置块div的“绝对位置”。 在div块上应用show方法。