CSS工具提示没有'；不能使用滑块

我为一个小的大学图书馆管理这个网站，我正在尝试为一个滑块的图像创建一个气泡工具提示。下面是指向页面的链接，向您展示我的意思：

。如果将鼠标悬停在滑块中的第一个图像上，将看到工具提示卡在其中。这个工具提示没有JavaScript，只有CSS。我从你那里得到了密码

这是工具提示的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;
}

这是滑块的CSS

#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);
}

这是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不兼容。

---

如果您有任何建议或建议，我们将不胜感激。

只需从

#slider中删除
溢出：隐藏的
。当我通过开发人员工具实时执行此操作时，content ul li对我有效。
请删除类#slider的
溢出：隐藏的
。content ul li

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

}
非常感谢你，贾亚拉吉！