0

我已经包含了 bootstrap-twipsy.js 1.3.0 并从我的网站上的 bootstrap.css 复制了 twipsy 的 css。但是twipsy的效果是不行的。当我包含 bootstrap.css 时，twipsy 工作正常。我只需要twipsy的css，而不是bootstrap的css。这是CSS：

.twipsy {
  display: block;
  position: absolute;
  visibility: visible;
  padding: 5px;
  font-size: 11px;
  z-index: 1000;
  filter: alpha(opacity=80);
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.twipsy.fade.in {
  filter: alpha(opacity=80);
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.twipsy.above .twipsy-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000000;
}
.twipsy.left .twipsy-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000000;
}
.twipsy.below .twipsy-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000000;
}
.twipsy.right .twipsy-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000000;
}
.twipsy-inner {
  padding: 3px 8px;
  background-color: #000000;
  color: white;
  text-align: center;
  max-width: 200px;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.twipsy-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

和小提琴：http: //jsfiddle.net/FArIZzX77/4Fz5T/

4

1 回答 1

0

您在某些方面错过了使用 opacity 显示/隐藏部分最重要的 CSS 属性

.fade {
    -moz-transition: opacity 0.15s linear 0s;
    opacity: 0;
}
.fade.in {
    opacity: 1;
}​

添加了使用此 CSS 的小提琴：http: //jsfiddle.net/4Fz5T/1/

当您将鼠标移入时，工具提示会添加到正文中，并且它会变为 class="twipsy fade in" 在工具提示的隐藏功能上删除 in，使其不可见（不透明度 = 0）。请注意，它不会从 DOM 中删除元素。

于 2012-10-04T08:22:09.307 回答