Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Hover, всплывающий блок внутри блока / 8 сообщений из 8, страница 1 из 1
09.10.2021, 20:04
    #40103351
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hover, всплывающий блок внутри блока
https://jsfiddle.net/7gb0chpj/


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

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

C ув. Tors
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2021, 20:22
    #40103354
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hover, всплывающий блок внутри блока
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:31
    #40103355
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hover, всплывающий блок внутри блока
Чтоб при наведении на block2 всплывал PopUp Block внутри block1.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2021, 22:34
    #40103367
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hover, всплывающий блок внутри блока
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
| Ответить | Цитировать | Написать  
10.10.2021, 09:46
    #40103390
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hover, всплывающий блок внутри блока
tors
Чтоб при наведении на block2 всплывал PopUp Block внутри block1.

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


Код: 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, 16:44
    #40103645
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hover, всплывающий блок внутри блока
tors,
Ну только другой селектор, что бы выбрать .popup

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

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


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