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

回答

相关问题