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>はタイプミスである必要があり、終了タグはコンテンツの後に表示され、要素aとp要素) を相対的に配置するように設定します。要素に設定display: noneしpますが、ホバーしたときに絶対位置に配置し (これは、囲んでいる要素に対して相対的に配置されることを意味します)、可視にします。適切な背景、境界線、およびその他のものを追加します。詳細はコンテキストによって異なります。以下は、すべての要素が 100 ピクセルの高さの画像を使用している場合の 1 つの可能性imgです (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 に答える