预览链接后面的文字

Question

是否可以使用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>

Answer 1

可以通过CSS属性z-index和opacity进行重叠和显示。 但是，必须使用绝对定位将元素彼此堆叠。

Answer 2

每个链接都可以轻松添加工具提示

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

使用title属性添加“预览”，以便当某人将鼠标悬停在链接上并停留片刻时，他们可以看到工具提示：）

Answer 3

在CSS中，设置包含链接的元件（ dd你的情况-标记<dd></dd>必须是一个错字，结束标签应该出现的内容之后， a和p元素）被相对定位。 设置display: none p元素，而是将其悬停时，使其绝对定位（这实际上意味着它将相对于封闭元素定位）并将其变为可见。 添加合适的背景，边框和其他内容。 具体取决于上下文。 如果img元素全部使用100px高的图像（因此108px或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>