多个 CSS 悬停弹出窗口可以在单个 div 中占据相同的空间吗？

Question

我试图在菜单（列表项）中的不同行的悬停伪类上弹出文本跨度。 如果菜单/列表是水平的，我可以让弹出窗口在 div 中占据相同的空间，但垂直列表将弹出窗口放置在与“父”列表/菜单项相同的垂直高度处。

这是我迄今为止的相关代码：

<div id="greenback">
  <div class="serviceframe">
    <div class="serviceslist">
<ul>
<li><a href="">item 1<span>this is popup1.</span></a></li>

<p><li><a href="">item 2<span>This is popup 2's text but I want it to appear in exactly the same place as popup 1's text does.</span></a></li></p>

<p><li><a href="">item 3<span>same here - how can I get all popups positioned in exactly the same place?</span></a></li></p>
</ul>
        </div><!-- closes serviceslist-->
    </div><!-- closes serviceframe -->
</div><!-- closes greenback-->

CSS：

ul {
    list-style: disc url(w-arrow.png) outside;
    }



#greenback {
    position: relative ;
        top: 0em ;
    width: 800px ;
    height: 250px ;
    background-color: #7EBB11 ;
    border: 3px solid #112D82 ;
    }

/*********SERVICE LIST MENU**********/
.serviceframe { 
    position: relative ;
    width: 100% ;
    height: 94% ; 
    background-color: #666666 ; 
    top: 3%; bottom: 3%;
    }
/*--serviceframe is now sitting in greenback--*/

.serviceslist {
    position: relative ;
    width: 100% ;
    height: 90%  ;
    top: 1% ;
    background-color: #7EBB11 ;
    font-family: Optima, Calibri, Candara, Century-Gothic, 
    Arial, sans-serif;
    font-size: 100% ;
    color: black ;
    display: table-cell ;
    vertical-align: middle ;
    z-index: 100 ;
}

.serviceslist a 
    {position: relative;
    display: table-cell; text-align: left; height: 100%;  font: 1em sans-serif; 
    text-decoration: none; color: #112D82; 
    background: #7EBB11 ; 
}

/*appearance of the <a> item (but before the <span> tag) on hover*/
.serviceslist a:hover {
    color: white;
    }

/*appearance of the spanned content within <a></a> tags when not hovered*/
.serviceslist a span {display: none;}

/*appearance of spanned content within <a> tags when hovered*/
.serviceslist a:hover span {
    position: absolute;
    display: table-cell;  
    margin-top: 0em; margin-left: -50%; z-index: 100;
    width: 40%; height: auto; color: #FFFFFF;  background-color: #7EBB11;
    font: 14px Verdana, sans-serif; text-align: left;
    }

Answer 1

天哪，对于一个简单的任务来说，这是一大堆 HTML 和 css。 我不会尝试通读所有内容，但只是给您答案

<ul>
  <li><a href="">item 1<span>this is popup1.</span></a></li>
  <li><a href="">item 2<span>This is popup 2's text but I want it to appear in exactly the same place as popup 1's text does.</span></a></li>
  <li><a href="">item 3<span>same here - how can I get all popups positioned in exactly the same place?</span></a></li>
</ul>

ul { position: relative; }
ul span { position: absolute; }

您只需要在 ul （或其上面的 div 之一）上有相对位置，因为这就是您想要使您的跨度绝对化的位置。

另外，删除 LI 周围的 P 标签。 UL 和 LI 之间不应该有任何东西。

Answer 2

那么您希望所有不同的跨度出现在同一个地方吗？
您在 A 中设置相对位置，这使得跨度看起来与其“相对”。

修复：

• 删除相对定位
  锚。 // 不过，这似乎并不重要
  FF 由于某种原因
• 设置定位（顶部、左侧等）
  跨度到所需值。

*你的代码片段不能在 IE6/7 上运行，所以我没有关心其中的错误。