Как мне отобразить изображение в отдельном div-файле при наведении курсора мыши на div-файл, используя только CSS?

StackOverflow https://stackoverflow.com/questions/108461

  •  01-07-2019
  •  | 
  •  

Вопрос

У меня есть небольшая галерея миниатюр.Когда я навожу указатель мыши на уменьшенное изображение, я бы хотел, чтобы в div в правом верхнем углу экрана отображалось изображение в натуральную величину.Я видел, как это делалось с использованием только CSS, и я бы хотел пойти по этому пути, а не использовать javascript, если это возможно.

Это было полезно?

Решение

Чистые всплывающие окна CSS2, с того же сайта, который приносит нам Complexspiral.Обратите внимание, что в этом примере в качестве переносного элемента используются фактические навигационные ссылки.Если вы этого не хотите, это может вызвать некоторую липкость в отношении версий IE.

Основной метод заключается в том, чтобы вставить каждое изображение внутри тега ссылки с фактическим href (в противном случае некоторые версии IE будут пренебрегать:hover)

<a href="#">Text <img class="popup" src="pic.gif" /></a>

и расположите его умно, используя абсолютное положение.Изначально скройте изображение

a img.popup { display: none }

а затем при переносе ссылки настройте ее отображение. 

a:hover img.popup { display: block }

Это базовый метод, но всегда будут серьезные ограничения на позиционирование, поскольку тег изображения находится внутри тега ссылки.Смотрите ссылку для получения подробной информации;он использует нечто более хитрое, чем демонстрация:ничего, что могло бы скрыть изображение.

Другие советы

Игровая площадка CSS использует чистый CSS для такого рода задач, одна из демонстраций, несомненно, поможет вам, и поскольку это все CSS, просто просмотрите исходный код, чтобы узнать - вы, вероятно, захотите использовать псевдокласс:hover, но для него есть ограничения в зависимости от таргетинга вашего браузера.

У Эрика Мейера Чистые всплывающие окна CSS 2 демо-версия звучит достаточно похоже на то, что вы хотите.

Вот несколько примеров:

Этот последний действует по щелчку мыши.Просто быть законченным в своем поведении.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top