如何将叠加层与悬停上的图标列表对齐 - JS / CSS答案

【问题标题】：How to align the overlay with the list of icons on hover- JS /CSS如何将叠加层与悬停上的图标列表对齐 - JS / CSS
【发布时间】：2014-12-30 21:26:46
【问题描述】：

我有一个<li>'s 列表，旁边有一个图标，悬停时会显示一个包含“测试”信息的叠加层。如下所示：

test1

test2

test3

等等……

html:

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

js:

$('span.account-info-icon').on("mouseenter", function(event){
  $("#hover-container").show();
   }).on("mouseout", function(){
      $("#hover-container").hide(); 
    });

上面的代码可以很好地在悬停时显示/隐藏 div 容器。但是，我遇到了叠加层的定位问题。我使用 css 来定位叠加层，因此，无论我悬停哪个图标，叠加层始终位于下方。简而言之，因为我对<div> conatiner 的值进行了硬编码，所以叠加层总是显示在一个地方，并且不会像悬停在图标上那样移动。下面是用于定位叠加层的 css im。

CSS：

#hover-container{
display: none;
position: relative;
top: -750px;
left: 943px;
padding: 2px 0 0 9px;

}

基本上，我正在尝试根据悬停的流程对齐叠加层。所以当我将鼠标悬停在“test1”图标上时，覆盖应该显示在它旁边。我不确定这是否可以通过 CSS 或 Js 实现。任何想法表示赞赏！！！！

提前致谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

为简化此练习，请熟悉两个 css 位置值：“position:relative”和“position:absolute”。此外，适当的容器安排将帮助您获得良好的结果。

假设 #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>

这里，包装容器提供了一个外壳，绝对定位的元素出现在其中。绝对定位元素尊重显式相对定位的父 html 容器的位置（如果尚未分配 css 位置属性）

【讨论】：

【解决方案2】：

请参考小提琴-http://jsfiddle.net/L33jo3j7/4/

$el.hover() 几乎解决了问题。

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

这看起来更好- http://jsfiddle.net/L33jo3j7/4/

【讨论】：

悬停看起来很棒！但是当你鼠标悬停时隐藏覆盖的最佳方法是什么？有什么建议吗？