0

私は、bootstrap-twipsy.js 1.3.0 をインクルードし、私のサイトの bootstrap.css から twipsy の css をコピーしました。でもツイプシーの効果は効かない。bootstrap.css をインクルードすると、twipsy が正常に動作します。ブートストラップの css ではなく、twipsy の 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

不透明度を使用して部分を表示/非表示にする最も重要な CSS プロパティをいくつかの点で見逃しています

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

この CSS を追加した作業フィドル: http://jsfiddle.net/4Fz5T/1/

マウスを移動すると、ツールチップがボディの先頭に追加され、class="twipsy フェードイン" が取得されます。ツールチップの非表示機能でインが削除され、非表示 (不透明度 = 0) になります。DOM から要素を削除しないことに注意してください。

于 2012-10-04T08:22:09.307 に答える