Показать описание при наведении

Тема в разделе "Верстка", создана пользователем Denixxx, 22 янв 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Здравствуйте, народ.
    Видел иногда в каких-то магазинах и на сайтах такую фишку.
    Категория товара, список товаров в виде маленьких иконок.
    Например:
    shkafkupe.png

    Как сделать так, чтобы при наведении на иконку товара выезжало его описание, скрытое до этого между картинкой и ценой?
    То есть сама карточка при наведении удлинняется за счёт добавки описания, а при отведении курсора — убирается?
    Как это сделать без яваскрипта, на CSS? А может ссылка есть на пример?
    Как понадобилось, так забыл где видел:)
     
  2. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    54
    Много способов решить такую штуку. Самый простой - на тот блок который скрывается повесить max-height: 0 и overflow: hidden;
    При ховере на родительский блок у этого тега max-height: inherit.
    Пример.

    Только минус этого метода - анимации нет. Если высота блока с описанием фиксированная то проще сделать тогда при ховере max-height: **** (значение в пикселях)

    Тут куча всяких примеров аналогичных : http://www.thomashardy.me.uk/demos/css3-hover-effects/

    Вот еще примеры: http://tympanus.net/Development/HoverEffectIdeas/
     
    Последнее редактирование модератором: 25 мар 2015
    Denixxx нравится это.
  3. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Спасибо. А я уж начал на jQuery писать. Написал.
    Но он чего-то дёргается, хотя вроде и прописал :not( :animated), не помогло.
    Вот здесь:

    Хз в чём дело, не разобрался пока.
    А что резко дергается можно транзишен добавить, это не проблема.
    Проблема — что нижняя сетка айтемов смещается при ховере.
    Пойду-ка спать, утро вечера мудреней.
     
    Последнее редактирование: 24 мар 2015
  4. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    54
    Я немного свой пример доработал. Да, с транзишоном лучше. Только анимация будет работать при конкретной величине макс-хейта (при инхерите только дергаться будет). Правда есть нюанс, при указании конкретной величины, если блок описания будет больше нежели чем макс-хейт, то оно все не поместится соответственно. В таком случае надо будет менять макс-хейт. Макс-хейт: инхерит бы решил эту проблему, но нет транзишона.
    В общем тут надо подумать как оно будет в дальнейшем.
     
    Denixxx нравится это.
  5. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Утро вечера мудреней, и всё получилось.
    jQuery код удалил, взял Ваш, vytyacom, за основу и доработал.
    Ещё раз спасибо за подсказку, мне это решение в голову не приходило и не знал где подсмотреть.
    От транзишена пришлось отказаться.
    Пришлось при наведении на товар изменить position контейнера на absolute, чтобы не дёргались соседние товары при изменении размера.
    А при убирании фокуса — возвращать position на relative. Чтобы контейнер при absolute не разъезжался, пришлось ему также задать фиксированную ширину.
    При использовании транзишена все манипуляции браузера становятся слишком заметны, потому от него отказался.
    Вот конечный вариант, если интересно: http://jsfiddle.net/Den1xxx/LdbLe36k/
    Максимальную высоту ограничивать нельзя, т.к. мы не знаем, чего там и сколько администратор в описание товара напихает;)
     
    Последнее редактирование: 23 янв 2015
  6. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    54
    Я немного подредактировал твой вариант.
    http://jsfiddle.net/vytya/LdbLe36k/2/
    Ну может уже конечно перебор.
    Но мне кажется абсолютом сам блок item не стоит указывать ибо тогда под него соседние залазят. Лучше item пусть будет релативом. А внутри уже некий inner блок пусть абсолютом. Тогда при ховере item будет занимать свое место, а с иннером уже можно делать что хочешь.
    Ну и добавил враппер.
    Там правда конструкция несколько такая дикая. Понаплодил дивов, но с 1го раза чтото лучше не придумал.
     
  7. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Прикольно конечно, но действительно перебор — к тому же нельзя задавать разные классы для объектов.
    Так как неизвестно, сколько товаров будет в ряду — список объектов формируется скриптом автоматически.
    К тому же смена position на absolute меня ничуть не заботит — это работает под всеми браузерами и к тому же при смене фокуса возвращается назад.
     
  8. vlasenkov

    vlasenkov Писатель

    Регистр.:
    4 окт 2014
    Сообщения:
    8
    Симпатии:
    0
    Добавьте несколько item'ов и увидите как все скачет.
     
  9. GigabiT

    GigabiT Писатель

    Регистр.:
    12 мар 2015
    Сообщения:
    9
    Симпатии:
    3
    Вот набросал красивый и универсальный вариант. https://jsfiddle.net/LdbLe36k/4/
     
Статус темы:
Закрыта.