預覽鏈接后面的文字

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>