Показ контента, который не вмещается в блок при наведении

243

12 октября 2017, 10:54

Есть такая структура блоков:

Как реализовать, что бы при наведении по бокам контейнера с контентом выдвигался и показывал скрытый блок, отодвигаясь в сторону?

Answer 1

Без кода сложно дать конкретный ответ, например можно так:

* { 
  box-sizing: border-box 
} 
 
.row { 
  display: flex; 
  flex-wrap: wrap; 
} 
 
.col { 
  position: relative; 
  width: 100%; 
  min-height: 1px; 
  border: 3px solid gold; 
  transition: all .5s; 
} 
 
.col-1 { 
  flex: 0 0 20%; 
} 
 
.col-2 { 
  flex: 0 0 50%; 
} 
 
.col-3 { 
  flex: 0 0 30%; 
} 
 
.col-1:hover { 
  flex: 0 0 50%; 
} 
 
.col-1:hover+.col-2 { 
  flex: 0 0 20%; 
}

<div class="row"> 
  <div class="col col-1">Содержимое1</div> 
  <div class="col col-2">Содержимое2</div> 
  <div class="col col-3">Содержимое3</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

ошибка Undefined property: при парсинге JSON в PHP

в строке foreach($decoded->data as $data) происходит ошибка Notice: Undefined property: stdClass::$data in Warning: Invalid argument supplied for foreach() почему это происходит? с другим файлом...

340

HTML