Question

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

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的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不兼容。任何建议或建议将不胜感激。

Answer 1

从overflow: hidden移除#slider .content ul li - 当我通过开发人员工具进行实际操作时，对我有用。

Answer 2

请删除课程#slider .content ul li

的overflow:hidden

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

}

CSS TOOLTIP不适用于滑块

2 个答案: