1

我试图弹出气泡文本，因为我已经在下面编码了，当鼠标悬停在应该弹出气泡文本的帮助锚标记上时的代码，但它对我不起作用，请帮助我。

这是我的代码片段。

**HTML Code:**

<div class="divbubble"> <div class="tooltip">
                                    <a href="#">Help</a>
                                    <div>
                                        <div class="top"></div>
                                        <div>
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                        </div>
                                        <div class="bottom"></div>
                                    </div>
                                </div></div>

**CSS code:**

.divbubble .tooltip {
  width: 18px;
  height: 18px;
  position: relative;
  margin-left: 15px;
  float: left;
}
.divbubble .tooltip a {
  display: block;
  float: left;
  width: 18px;
  height: 18px;
  background: url(images/icoQuestion.png) no-repeat;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
.divbubble .tooltip a:hover {
  background-position: 0 -18px;
}
.divbubble .tooltip > div {
  display: none;
  position: absolute;
  float: left;
  width: 220px;
  bottom: 22px;
  left: -101px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  z-index: 20;
}
.divbubble .tooltip > div .top {
  background: url(images/tooltipTop.png) no-repeat;
  width: 220px;
  height: 10px;
}
.divbubble .tooltip > div div {
  display: block;
  background: #4599c3;
  width: 200px;
  padding: 0 10px;
}
.divbubble .tooltip > div .bottom {
  background: url(images/tooltipBottom.png) no-repeat;
  width: 220px;
  height: 21px;
}
4

0 回答 0