Bootstrap сетка с появляющимся блоком без сдвига

funman

Знаток
Регистрация
28 Дек 2007
Сообщения
163
Реакции
26
Помогите разобраться с версткой, хочу сделать чтобы при наведении (Hover) блок выезжал вниз, появлялась скрытая область , при этом не раздвигались все элементы сетки, не двигались блоки.

примерно как здесь при наведении на карточку товара.


Пример моей сетки с карточками куда, хочу вставить выезжающие доп.блоки
 
нашел пример
Код:
<div style="width: 80px; height: 20px; background-color: red;"
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>

или вы не про это? суть я так понимаю примерна такая же как в самом CSS прописать hover.
Но вопрос не как скрыть, спрятать элемент, я понимаю что в стиле нужно менять Display или
opacity

Проблема в том, что в сетке у меня блоков , жестко задан "height:" чтобы блоки были одной длины.
если на события hover для отдельного блока менять "height:" он двигает блоки внизу, а хотелось бы эффект наплыва, как в примерах выше. Я понимаю, что как то через Z-index там происходит наложение, но просто задать для все блоков Z-index: 1 а для Hover Z-index:999 не работает, или я чтото не то делаю, какие свойства стилей еще нужно поменять чтобы при событии HOVER он вылез поверх нижнего слоя ничего не двигая?

 
Последнее редактирование:

Добавил обертку контента каждого блока. Прописал ей абсолютное позиционирование. Блоки не меняют высоту при наведении, у них можно очистить визуальные стили, сделав полностью прозрачными и прописать визуальные стили обертке. При наведении мыши на блок присваивается больший z-index, обертка увеличивает высоту.
Есть правда неприятный момент, когда мышь уводишь с блока он сразу перестает быть сверху.
PS кстати, при абсолютном позиционировании можно так же безболезненно увеличить не только высоту но и ширину и сдвинуть в любом направлении, при этом сетка никак на это кощунство не отреагирует)))
 
Интересует данный вопрос. Прочитал простое решение на CSS. Но при добавлении position:absolute вёрстка продуктов плывёт. Понять бы как исправить.
Может кто подскажет ещё варианты. Либо подскажет почему может вёрстка съехать.
Тема с вариантами.
Скрытое содержимое доступно для зарегистрированных пользователей!

Пробовал это вариант.
Для просмотра ссылки Войди или Зарегистрируйся
Здесь всё красиво, a у меня нижние блоки уходят сразу вверх.
 
А ваш пример где (тот что не работает) ?
Ссори, я думал просто есть ещё варианты как сделать. Сейчас придумаю как организовать.
Сайт пока не готов, только частично.
 
Последнее редактирование:
Вообщето нужно было показать где именно нужен данный функционал.
Я так понял что наверно на внутренних страницах товаров.
Вот:
Для просмотра ссылки Войди или Зарегистрируйся
Тут все и так стояло но нехватало position:absolute;
 
Вообщето нужно было показать где именно нужен данный функционал.
Я так понял что наверно на внутренних страницах товаров.
Вот:
Для просмотра ссылки Войди или Зарегистрируйся
Тут все и так стояло но нехватало position:absolute;
Я так понимаю position:absolute добавить для hover ?
Потому как если добавляю сразу для дива, то вёрстка как бы сворачивается в один ряд.
Я потом попозже попробую.
Спасибо за содействие.
Получилось! :yahoo:
Таки да, добавил свойство position:absolute только для hover и всё как надо.
Нижний блок не сдвигается. Правда некоторые блоки при наведении уменьшаются
по ширине. Но есть подозрение что это из-за разных картинок. Картинки пока как демо.
Думаю потом должно быть нормально, когда сделать пропорции одинаково.
Ещё раз благодарю.;)
 
Последнее редактирование:
  • Нравится
Реакции: Didi
Вот:
Для просмотра ссылки Войди или Зарегистрируйся
Тут все и так стояло но нехватало position:absolute;
В обще рано радовался. (((
В моём случае видимо ещё какие-то стили накладываются и не хочет работать как надо.
Первый блок с товаром всё отлично.
Для просмотра ссылки Войди или Зарегистрируйся
А вот дальше хуже. Особенно крайний справа. Смещается по ширине. Сначала думал из-за картинок такое. Картинки перезалил квадратные. Но увы...
Для просмотра ссылки Войди или Зарегистрируйся
 
Назад
Сверху