Question

我有一个带有注释的文档，当用户将鼠标悬停在[note]指示符上而不会中断文本的其余部分时，该文档应显示。这是我的CSS：

＆＃13;

.nb {
  color: blue
}
.nb sup {
  color: blue
}
.nb:hover sup {
  cursor: alias
}
.nb:hover span.ft {
  display: inline;
  position: relative;
  bottom: -30px;
  padding: 2px;
  background-color: white;
  border: 2px solid black;
}
.ft {
  display: none
}

＆＃13;

<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>

＆＃13;

我希望我的下拉文本不会破坏它所在的其余部分（或它下面的行），但我没有成功。

Answer 1

＆＃13;

.nb {
  color: blue
}
.nb sup {
  color: blue
}
.nb:hover sup {
  cursor: alias
}
.nb:hover span.ft {
  display: inline;
  position: absolute;
  padding: 2px;
  background-color: white;
  border: 2px solid black;
}
.ft {
  display: none
}

＆＃13;

<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>

＆＃13;

Answer 2

.nb {
  color: blue
}
.nb sup {
  color: blue
}
.nb:hover sup {
  cursor: alias
}
.nb:hover span.ft {
  display : inline-block;
  position : absolute;
  color : black;
  border : solid 1px black;
  padding : 4px;
  background-color : white;
}
.ft {
  display: none
}

<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>

使用absolute CSS定位，因为它会使框表现为没有其他元素约束。

Answer 3

＆＃13;

.nb {
  color: blue;  position: relative;
}
.nb sup {
  color: blue
}
.nb:hover sup {
  cursor: alias
}
.nb:hover span.ft {
  display: inline;
position:absolute;
  bottom: -30px;
  padding: 2px;
  background-color: white;
  border: 2px solid black;
}
.ft {
  display: none; width:190px;
}

＆＃13;

<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>

＆＃13;

CSS定位混音

3 个答案: