Javascript 如何将覆盖与hover-JS/CSS上的图标列表对齐

我有一个

的列表

，旁边有一个图标，悬停时会显示一个覆盖着“测试”信息的图标。如下所示：

测试1

测试2

测试3

等等

html:

上面的代码可以很好地在悬停状态下显示/隐藏div容器。然而，我有问题的定位覆盖。im使用css定位覆盖，因此，无论我悬停哪个图标，覆盖始终位于下方。 简言之，因为我对

conatiner

的值进行了硬编码，所以覆盖始终显示在一个位置，并且不会按照图标上方的悬停移动。 下面是用于定位覆盖的css im

CSS:

}

基本上，我正在尝试的是根据悬停的流动来调整覆盖。所以当我将鼠标悬停在上面时，比如说：“test1”图标，覆盖应该显示在它旁边。我不确定这是否可以通过CSS或Js实现。 任何想法都值得赞赏

---

提前谢谢

请参考小提琴-

基本上，

$el.hover（）

解决了这个问题

如果你有任何疑问，请告诉我

这个看起来好多了-

---

要简化此练习，请熟悉两个css位置值：“位置：相对”和“位置：绝对”。此外，适当的容器安排将帮助您获得良好的效果

假设#hover container恰好在html中泛指非复制ID属性，那么它可以具有以下css定义：

#hover-container{
    display:none;
    position:absolute;
    padding: 2px 0px 0px 9px;
    left:100px;
}

然后，span的每个实例都应位于包装容器中，以帮助引导悬停精确显示在您想要的位置：

.info-row-wrapper {
    position:relative;
}

综合所有这些因素，您可以：

<div class="info-row-wrapper">
    <span class="account-info-icon"></span> // icon is the build using image sprites
    <div id ="hover-container>
        //details about the 'test1','test2'..so on
    </div>
</div>

//图标是使用图像精灵的构建
悬停看起来很棒！但是当你鼠标移出时，隐藏覆盖层的最好方法是什么呢？有什么建议吗？
#hover-container{
    display:none;
    position:absolute;
    padding: 2px 0px 0px 9px;
    left:100px;
}

.info-row-wrapper {
    position:relative;
}

<div class="info-row-wrapper">
    <span class="account-info-icon"></span> // icon is the build using image sprites
    <div id ="hover-container>
        //details about the 'test1','test2'..so on
    </div>
</div>