Предварительный просмотр текста по ссылке

Можно ли просмотреть «предварительный просмотр» того, что находится за ссылкой, используя 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>

источник

2012-05-31 Johnny Hankgard

Вы пытаетесь получить что-то наподобие «водяных знаков»? –

Я не уверен, что знаю, что такое водяной знак –

Вы видели выцветшие тексты за некоторыми официальными документами, например, название компании, обычно печатаемой полупрозрачным цветом на бумагах формата А4? Это водяной знак. Все еще не понял? Google для * образцов водяных знаков *. ;) –

в CSS, установите элемент, содержащую ссылку (dd в вашем случае-разметке <dd></dd> должен быть опечатка, закрывающий тег должен появиться после того, как содержание, в a и p элементах) в быть относительно позиционированным. Установите 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-01 06:15:58

Перекрытие и отображение через можно сделать с помощью свойств CSS z-index и opacity. Тем не менее, вы должны использовать абсолютное позиционирование для складывания элементов друг на друга.

источник

2012-05-31 20:59:46

Не могли бы вы рассказать об этом, возможно, с примером кода –

Я думаю, что лучше, если вы сначала загрузите изображение или эскиз того, что вы имеете в виду, тогда я уверен, что мы сможем решить его вместе;). –

каждое звено может быть легко добавлен к ссылке

<a href="https://stackoverflow.com/users/811785/saeed" title="5623 reputation" class="comment-user">Saeed</a>

использовать атрибут title, чтобы добавить «предварительный просмотр», так что, когда кто-то мыши по ссылке и парит на мгновение всплывающей подсказке, они могут увидеть всплывающую подсказку :)

источник

2012-05-31 21:02:16 RGB

, если вы хотите просмотреть, например google, с результатами поиска, вы можете отобразить страницу в вызове ajax и отобразить ее в div, который перемещается с помощью мыши, но это целая другая червь из червей .... – RGB

I было больше мышления без каких-либо зависающих эффектов, просто видимый предварительный просмотр того, что стоит за ссылкой ... –

хорошо, если атрибут title не достаточен (чистый html/css), вам придется использовать некоторый javascript для получения любого вида предварительного просмотра , – RGB

Предварительный просмотр текста по ссылке

ответ

Смежные вопросы