При наведении на ссылку показывать всплывающий блок

@antojka91 · Регистрация: 16.06.2013

Студворк — интернет-сервис помощи студентам

Как это реализовать с помощью css?

@Alorian · 06.07.2013, 13:10

HTML5
1
<a href="">Ссылка <div>Блок</div></a>

CSS
1
2
3
a{display:inline-block; position: relative;}
a div{display:none; position:absolute; left:-10%; top:-10%;}
a:hover div{display:block;}

Примерно так навскидку. Код не проверял, написал прямо здесь, но смотреть в этом направлении. По наведению может отобразиться только вложенный блок, отсюда и идем.

@Forastero · 06.07.2013, 15:41

HTML5
1
2
3
4
5
  <div class="modal">
    <div class="modal-inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores unde exercitationem deleniti saepe vitae soluta ipsum. Cum nulla corporis corrupti dolorum eius impedit fugiat iure modi necessitatibus sunt cupiditate rem?
    </div>
  </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.modal {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.5);
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
 
.modal-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.4);
  width: 200px;
  padding: 10px;
}
 
a:hover ~ .modal {
  display: block;
}

Песочница: http://jsbin.com/ucened/7/edit

@antojka91 · 06.07.2013, 15:54 **[ТС]**

Спасибо большое!

@lifeact · 15.06.2014, 17:36

Сообщение от Forastero

Песочница: http://jsbin.com/ucened/7/edit

а у меня при наведении дико (очень быстро) мигает (появляется/исчезает) блок....

это у меня глюк?

Добавлено через 1 минуту
в ИЕ 10 и хроме так

@yan_azov · 15.06.2014, 18:51

это не глюк. это кривой код

CSS
1
2
3
4
5
6
7
8
9
.modal {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.5);
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

ссылка накрывается, ховер соответственно отменяется, и все по новой

@lifeact · 16.06.2014, 17:29

Сообщение от yan_azov

это не глюк. это кривой код

а нет случайно рабочего варианта?

@yan_azov · 16.06.2014, 22:49

http://jsbin.com/sosulogi/1/edit
если без затемнения то вот так можно попробовать, а с затенением на чистом css не могу что то придумать.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid fuga delectus praesentium nemo tempora esse ratione veritatis quos non labore dignissimos temporibus explicabo distinctio enim odit minima quasi eligendi. <a href="#">link</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quos dolorem! Sint eos sed officia pariatur explicabo ea enim ipsum esse temporibus earum nesciunt autem eum ex cupiditate reprehenderit aspernatur!
  
    <div class="modal-inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores unde exercitationem deleniti saepe vitae soluta ipsum. Cum nulla corporis corrupti dolorum eius impedit fugiat iure modi necessitatibus sunt cupiditate rem?
    </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.modal-inner {
  position: absolute;
  display: none;
  top: 30%;
  left: 30%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.4);
  width: 200px;
  padding: 10px;
}
 
a:hover ~ .modal-inner {
  display: block;
}
a:hover{
  z-index: 10;
  
}

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@antojka91 0 / 0 / 0 Регистрация: 16.06.2013 Сообщений: 10

	При наведении на ссылку показывать всплывающий блок 06.07.2013, 12:17. Показов 14727. Ответов 7 Метки нет (Все метки) Как это реализовать с помощью css? Миниатюры 0

@antojka91 0 / 0 / 0 Регистрация: 16.06.2013 Сообщений: 10
	06.07.2013, 15:54 [ТС]
	Спасибо большое! 0