CSS TOOLTIP不適用於SLIDER

我管理一個小型高校圖書館的網站，並試圖爲屬於滑塊一部分的圖像創建氣泡工具提示。這裏是鏈接到頁面，向你展示我的意思：CSS TOOLTIP不適用於SLIDER

http://library.sfc.edu/webvoy3.htm。如果您將鼠標懸停在滑塊的第一張圖片上，您會看到工具提示卡在那裏。這個工具提示沒有JavaScript，只有CSS。我從http://trentrichardson.com/examples/csstooltips/得到了代碼。

這是提示的CSS部分：

a.tt{ 
    position:relative; 
    z-index:24; 
    color:#3CA3FF; 
    font-weight:bold; 
    text-decoration:none; 
} 

a.tt span{ display: none; } 

a.tt:hover{ z-index:25; color: #aaaaff; background:;} 
a.tt:hover span.tooltip{ 
    display:block; 
    position:absolute; 

    top:0px; left:0; 
    padding: 15px 0 0 0; 
    width:200px; 
    color: #993300; 

    text-align: center; 
    filter: alpha(opacity:90); 
    KHTMLOpacity: 0.90; 
    MozOpacity: 0.90; 
    opacity: 0.90; 
} 

a.tt:hover span.top{ 
    display: block; 
    padding: 30px 8px 0; 
    background: url(images/bubble.gif) no-repeat top; 
    margin-top: 20px; 
} 

a.tt:hover span.middle{ /* different middle bg for stretch */ 
    display: block; 
    padding: 0 8px; 
    background: url(images/bubble_filler.gif) repeat bottom; 
} 

a.tt:hover span.bottom{ 
    display: block; 
    padding:3px 8px 10px; 
    color: #548912; 
    background: url(images/bubble.gif) no-repeat bottom; 
}

這是滑塊

#slider { 
    width: 450px; 
    position: relative; 
    height:inherit; 
    float:left; 
    padding-right:45px; 
    margin-left: 8px; 
} 

#slider .buttons span { 
    display: block; 
    width: 38px; 
    height: 38px; 
    font-size: 0; 
    line-height: 0; 
    text-indent: -4000px; 
    cursor: pointer; 
} 

#slider .buttons span { 
    position: absolute; 
    top: 32px; 
} 

#slider .buttons .prev { 
    left: -5px; 
    background: url(images/button-prev.gif) no-repeat 0 0; 
} 

#slider .buttons .next { 
    right: 16px; 
    background: url(images/button-next.gif) no-repeat 0 0; 
} 

#slider .holder { 
    width: 400px; 
    height: 110px; 
    position: relative; 
    overflow: hidden; 
    left:40px; 
    margin-right: 5px; 
    padding-right: 0px; 
    padding-top: 9px; 
    background: url(images/back-slider.jpg) no-repeat 0 0; 
} 

#slider .content ul { 
    position:relative; 
    list-style-type:; 
    height:112px; 
    width: 450px; 
    overflow:hidden; 
    padding-right: 10px; 
    padding-top: 5px; 
} 

#slider .content ul li { 
    float: left; 
    display: inline; 
    list-style-type: none; 
    margin-left: 16px; 
    height:133px; 
    overflow:hidden; 
    width:80px; 
} 

#slider .content ul li a { 
    display:block; 
    width: 74px; 
    height: 97px; 
    padding-left: 3px; 
    padding-top: 4px; 
    background: url(images/slider-fragment.gif); 
}

的CSS，這是HTML代碼

<div id="slider"> 
    <div class="buttons"> 
    <span class="prev">prev</span> 
    <span class="next">next</span> 
    </div> 

    <div class="holder"> 
    <div class="content"> 
     <ul> 
     <li> 
      <a href="http://library.sfc.edu:7008/vwebv/holdingsInfo?bibId=261454" class="tt"> 
      <img src="css/css-eb/images/covers/cover1.png" /> 
      <span class="tooltip"> 
       <span class="top"></span> 
       <span class="middle">This is my Bubble Tooltip with CSS</span> 
       <span class="bottom"></span> 
      </span> 
      </a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div>

這個問題似乎與工具提示的CSS與滑塊的CSS不兼容。任何建議或意見將不勝感激。

來源

2012-07-20 Alex

剛剛刪除overflow: hidden從#slider .content ul li - 適用於我，當我通過開發工具生活時，

來源

2012-07-20 05:18:02 Ana

非常感謝，安娜。有效！ – Alex 2012-07-24 18:51:43

請該類#slider。內容UL李

#slider .content ul li { 
    float: left; 
    display: inline; 
    list-style-type: none; 
    margin-left: 16px; 
    height: 133px; 
    width: 80px;

}刪除overflow:hidden

來源

2012-07-20 05:30:46

非常感謝Jayaraj！ – Alex 2012-07-24 18:54:46

CSS TOOLTIP不適用於SLIDER

回答

相關問題