ReSQL.ru
     
powered by simpleCommunicator - 2.0.46     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Hover, всплывающий блок внутри блока
8 сообщений из 8, страница 1 из 1
Hover, всплывающий блок внутри блока
    #40103351
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
https://jsfiddle.net/7gb0chpj/


Чтоб при наведении на block2 всплывал PopUp Block внутри block1.

Можно запедалить на чистом css3 без js?

C ув. Tors
...
Рейтинг: 0 / 0
09.10.2021, 20:04
| Ответить | Цитировать | Написать  
Hover, всплывающий блок внутри блока
    #40103354
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
tors
Чтоб при наведении на block2 всплывал PopUp Block внутри block1.
Можно запедалить на чистом css3 без js?

Как вариант...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
-->
<style type='text/css'>
.block1 {
	height: 200px;
	background: blue;
}
.block2 {
	height: 200px;
	background: aqua;
}
.block2:hover + .popup {
	display: block;
}
.popup {
	height: 150px;
	background: beige;
	width: 94%;
	margin-left: 2%;
	margin-top: 2%;
	display: none;
}
</style>
<script>
</script>
</head>
<body> 
<div class="main">
	<div class="block1">
		Block 1
	</div>
	<div class="block2">
		Block 2
	</div>
	<div class="popup">
		PopUp Block
	</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
09.10.2021, 20:22
| Ответить | Цитировать | Написать  
Hover, всплывающий блок внутри блока
    #40103355
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
Чтоб при наведении на block2 всплывал PopUp Block внутри block1.
...
Рейтинг: 0 / 0
09.10.2021, 20:31
| Ответить | Цитировать | Написать  
Hover, всплывающий блок внутри блока
    #40103367
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
tors,
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
-->
<style type='text/css'>
 .main {
   position:relative;
 }

.block1 {
	height: 200px;
	background: blue;
}
.block2 {
	height: 200px;
	background: aqua;
}
 .block2:hover + .popup {
        position: absolute;
        top: 0;
	display: block;
}
.popup {
	height: 150px;
	background: beige;
	width: 94%;
	margin-left: 2%;
	margin-top: 2%;
	display: none;
}
</style>
<script>
</script>
</head>
<body> 
<div class="main">
	<div class="block1">
		Block 1
	</div>
	<div class="block2">
		Block 2
	</div>
	<div class="popup">
		PopUp Block
	</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
09.10.2021, 22:34
| Ответить | Цитировать | Написать  
Hover, всплывающий блок внутри блока
    #40103390
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
tors
Чтоб при наведении на block2 всплывал PopUp Block внутри block1.

"Внутрь" позиционируй его сам.
...
Рейтинг: 0 / 0
10.10.2021, 09:46
| Ответить | Цитировать | Написать  
Hover, всплывающий блок внутри блока
    #40103624
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
Поправко.
Та же задача.


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<div class="main">
  <div class="block1">
    Block 1
    <div class="popup">
      PopUp Block
    </div>
  </div>
  <div class="block2">
    Block 2
  </div>
</div>



Только css, без js.
...
Рейтинг: 0 / 0
11.10.2021, 15:57
| Ответить | Цитировать | Написать  
Hover, всплывающий блок внутри блока
    #40103645
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
tors,
Ну только другой селектор, что бы выбрать .popup

.main:hover>.block1:not(:hover)>.popup {
....
...
Рейтинг: 0 / 0
11.10.2021, 16:44
| Ответить | Цитировать | Написать  
Hover, всплывающий блок внутри блока
    #40107814
DHDD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DHDD
Гость
mazaj,

с этой строчкой CSS вместо JS:
Код: css
1.
2.
3.
.block1 + .block2:hover + .popup{
  display: block;
}
...
Рейтинг: 0 / 0
28.10.2021, 17:35
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Hover, всплывающий блок внутри блока
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru             Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=2&tid=1443178]:
 0ms
get settings:
 10ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 28ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 49ms
get tp. blocked users:
 1ms
others: 13ms
total:  139ms
созд. / загр.: 139ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]