0

メニュー（リストアイテム）のさまざまな行のホバー疑似クラスにテキストスパンをポップアップ表示させようとしています。メニュー/リストが水平の場合、ポップアップを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;
    }
4

2 に答える 2

0

では、すべての異なるスパンを同じ場所に表示したいですか? A に相対位置を設定すると、スパンが「相対的」に表示されます。

修理：

  • アンカーの相対位置を削除します。// でも、なぜかFFでは関係ないようです
  • スパンの位置 (上、左など) を目的の値に設定します。

*あなたのコード スニペットは IE6/7 では動作しないので、バグは気にしませんでした。

于 2008-12-18T14:45:15.720 に答える