0

Нужно, чтоб при наведении на один блок, внизу появлялся второй блок и обводка у них была общая.

.item {
	width: 220px;
	height: 300px;
	margin: 10px 3px;
	float: left;
	position: relative;
	}

.item:hover .item_inner {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background: #fff;
	box-shadow: 0 1px 14px rgba(0,0,0,0.3);
	height: 100%;
}

.item_param {
	display: none;
	text-align: left;
	padding: 0 5px;
	margin: 10px 0;
	background-color: #f3f3f3;
}
	
.item_inner{
	width: 100%;
	height: 100%;
	position: relative;
	padding-bottom: 5px;
	border: 1px solid green;
}

.item_inner:hover .item_param {
	display: block;
	top: 100%;
	width: 100%;
	position: absolute;
}
<div class="item">
		<div class="item_inner">
				TEXT
			<div class="item_param">
				<p>info</p>
				<p>info</p>
				<p>info</p>
				<p>info</p>
				<p>info</p>
				<p>info</p>
			</div>
		</div>
	</div>

4
  • У вас все работает, но кажись проблема в абсолютном значении. Вы написали "top: 100%;" что означает что второй блок будет находиться на следующем "экране" вашего браузера. (полистайте ниже)
    – Telion
    26 мар 2016 в 10:40
  • ну да все работает.. 26 мар 2016 в 10:42
  • через inherit свойство можно решить проблему
    – Invision
    26 мар 2016 в 11:17
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 26 мар 2016 в 19:31

2 ответа 2

1

Решение

.item_inner:hover .item_param {
  display: block;
  top: 100%;
  width: 100%;
  position: absolute;
  border: inherit;
  border-top: none;
  width: 210px;
  margin-top: 0px;
  margin-left: -1px;
}

Демо: http://codepen.io/anon/pen/QNgpGp

0

margin: 10px 0; у .item_param дает сверху отступ - это и приводит к отсутствию у них общего отступа, или вы хотите что бы у 2х блоков была зеленая обводка?

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.