У меня есть небольшая галерея миниатюр. Когда я помещаю указатель мыши на миниатюрное изображение, я хотел бы, чтобы изображение полного размера появилось в div в правом верхнем углу экрана. Я видел это, используя только CSS, и я хотел бы пойти по этому маршруту, а не использовать javascript, если это возможно.Как мне отобразить изображение в отдельном div на наведении курсора div, используя только CSS?
Pure CSS Popups2, с того же сайта, который приносит нам Complexspiral. Обратите внимание, что в этом примере используются фактические навигационные ссылки в качестве перевернутого элемента. Если вы этого не хотите, это может привести к некоторой липкости в отношении версий IE.
Основной метод, чтобы придерживаться каждого изображения внутри тега ссылки с фактической HREF (В противном случае некоторые версии IE будут пренебрегать: зависания)
<a href="#">Text <img class="popup" src="pic.gif" /></a>
и расположите его умело используя абсолютную позицию. Скрыть изображение изначально
a img.popup { display: none }
, а затем на прокрутке ссылки установите его, чтобы он появился.
a:hover img.popup { display: block }
Это основной метод, но всегда будут оставаться основными ограничениями позиционирования, так как тег изображения пребывает внутри тега ссылки. Подробнее см. Ссылку; он использует что-то более сложное, чем отображение: никто не скрывает изображение.
Демо-версия Eric Meyer's Pure CSS Popups 2 достаточно похожа на то, что вы хотите.
Вот несколько примеров:
Этот последний действует на мыши. Просто чтобы быть полным в поведении.
CSS Playground использует чистый CSS для этого типа вещей, одна из демоверсий, безусловно, поможет вам, и поскольку все это просто просмотр исходного кода, вы, вероятно, захотите использовать псевдо-класс: hover, но есть ограничения для него в зависимости от вашего таргетинга на браузер.
Возможно, вам стоит пойти с Javascript, если важна совместимость с браузером. – 2008-09-20 15:23:15