0

私は小さな大学図書館のウェブサイトを管理していて、スライダーの一部である画像のバブルツールチップを作成しようとしています。これが私が何を意味するかをあなたに示すためのページへのリンクです：

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

これはスライダーの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の非互換性にあるようです。任意の提案やアドバイスをいただければ幸いです。

4

2 に答える 2

1

overflow: hiddenから削除するだけ#slider .content ul liです-開発者ツールを介してライブでこれを行うとうまくいきます。

于 2012-07-20T05:18:02.303 に答える
0

overflow:hiddenクラス #slider .content ul liの を削除してください

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

}

于 2012-07-20T05:30:46.823 に答える