5

私がこれまでに持っているものを見るためにフィドル: http://jsbin.com/udegux/1/edit

HTML

<span id="test" class="drag-hint"><span>drag</span>Mouse and drag</span>

CSS:

.drag-hint {
  position:relative;
}
.drag-hint > span{
  display:none;
}
.drag-hint:hover > span {
  display:inline;
  position:absolute;
  top: -25px;
  left: 30px;
}

ご覧のとおり、現在、"top" 属性と "left" 属性を指定して、ホバー ドラッグ チップをテキストの中央に手動で配置しています。テキストが長かったり短かったりすると、それらの値を手動で変更して、ヒントが中央に表示されるようにする必要がありました。

純粋なCSSを使用して、「マウスとドラッグ」というフレーズの上に「ドラッグ」という単語を自動的に中央に配置する方法を探しています。

4

1 に答える 1

5

ブロックをテキストの上に配置して を設定text-align: centerすると、JavaScript を使用する必要がなくなります。

.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

JSビン。

于 2013-05-25T23:10:40.070 に答える