Question

我正在尝试在菜单中的不同行（列表项）的hover伪类上弹出文本跨度。如果菜单/列表是水平的，我可以让弹出窗口占据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上不起作用，所以我没有打扰它中的错误。

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

2 个答案: