Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Hover, всплывающий блок внутри блока  [new]
tors
Member

Откуда: Харьков
Сообщений: 1766
https://jsfiddle.net/7gb0chpj/


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

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

C ув. Tors
9 окт 21, 20:04    [22381742]     Ответить | Цитировать Сообщить модератору
 Re: Hover, всплывающий блок внутри блока  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
tors
Чтоб при наведении на block2 всплывал PopUp Block внутри block1.
Можно запедалить на чистом css3 без js?

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

<!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>
9 окт 21, 20:22    [22381747]     Ответить | Цитировать Сообщить модератору
 Re: Hover, всплывающий блок внутри блока  [new]
tors
Member

Откуда: Харьков
Сообщений: 1766
Чтоб при наведении на block2 всплывал PopUp Block внутри block1.
9 окт 21, 20:31    [22381748]     Ответить | Цитировать Сообщить модератору
 Re: Hover, всплывающий блок внутри блока  [new]
voraa
Member

Откуда:
Сообщений: 299
tors,
<!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>
9 окт 21, 22:34    [22381780]     Ответить | Цитировать Сообщить модератору
 Re: Hover, всплывающий блок внутри блока  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
tors
Чтоб при наведении на block2 всплывал PopUp Block внутри block1.

"Внутрь" позиционируй его сам.
10 окт 21, 09:46    [22381813]     Ответить | Цитировать Сообщить модератору
 Re: Hover, всплывающий блок внутри блока  [new]
tors
Member

Откуда: Харьков
Сообщений: 1766
Поправко.
Та же задача.


<div class="main">
  <div class="block1">
    Block 1
    <div class="popup">
      PopUp Block
    </div>
  </div>
  <div class="block2">
    Block 2
  </div>
</div>


Только css, без js.

Сообщение было отредактировано: 11 окт 21, 15:52
11 окт 21, 15:57    [22382320]     Ответить | Цитировать Сообщить модератору
 Re: Hover, всплывающий блок внутри блока  [new]
voraa
Member

Откуда:
Сообщений: 299
tors,
Ну только другой селектор, что бы выбрать .popup

.main:hover>.block1:not(:hover)>.popup {
....
11 окт 21, 16:44    [22382356]     Ответить | Цитировать Сообщить модератору
 Re: Hover, всплывающий блок внутри блока  [new]
DHDD
Member

Откуда:
Сообщений: 134
mazaj,

с этой строчкой CSS вместо JS:
.block1 + .block2:hover + .popup{
  display: block;
}
28 окт 21, 17:35    [22389505]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить