0

是否可以使用 css 和 html 显示链接背后的内容的“预览”？

例如：我在链接后面有一些文本信息，但我想在链接旁边显示这段文本的一部分……是否可以在不手动写下的情况下这样做？

这是代码示例

<dl>
<dt>News</dt>
<dd></dd>
<a href=".html"><img src=".jpg" height=100 width=120/>Some text</a>
    <p>This is the text i want to use as a preview of whats behind the active href link</p>
</dl>
4

3 回答 3

1

可以通过 CSS 属性z-index和opacity. 但是，您必须使用绝对定位来将元素相互堆叠。

于 2012-05-31T20:59:46.907 回答
0

每个链接都可以有一个工具提示，很容易添加到链接中

<a href="/users/811785/saeed" title="5623 reputation" class="comment-user">Saeed</a>

使用该title属性添加您的“预览”，以便当有人将鼠标悬停在链接上并悬停片刻时，他们可以看到工具提示:)

于 2012-05-31T21:02:16.470 回答
0

在 CSS 中，将包含链接的元素设置为相对定位（dd在您的情况下，标记<dd></dd>必须是拼写错误，结束标记应出现在内容之后，aandp元素）。display: none为元素设置，p但当悬停时，使其绝对定位（这实际上意味着它将相对于封闭元素定位）并将其变为可见。添加合适的背景、边框和其他东西。细节取决于上下文。img如果元素都使用 100 像素高的图像（因此 108 像素或适合p元素的位移） ，则以下是一种可能性。

<style>
dd p {
  display: none; }
dd {
  position: relative; }
dd:hover p {
  display: block;
  margin: 0;
  position: absolute;
  top: 108px;
  background: #ffd;
  color: black;
  border: solid gray 0.08em;
  padding: 0 0.2em;
  z-index: 1000;
  max-width: 20em;
}
</style>
于 2012-06-01T06:15:58.320 回答