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>

链接后面的文本预览

3 个答案: