CSS Показать активный элемент над div с переполнением: скрыто - PullRequest
3 голосов
/ 18 августа 2010

У меня есть панель прокрутки div с переполнением: скрыто.Пожалуйста, отметьте это здесь .На панели прокрутки отображаются продукты в виде изображений с подписями.Когда я перемещаю курсор мыши по элементу продукта, он получает светло-желтый фон и изменяет его высоту - я просто добавляю класс в элемент div с помощью jQuery, и он работает нормально.Проблема, которую мне нужно решить каким-то образом, состоит в том, чтобы показать расширенный div для активного продукта в виде отдельного div, который появляется над панелью прокрутки, хотя теперь он появляется внутри этой панели и расширяет его по высоте.Я хочу, чтобы он выглядел аналогично этому .Здесь вы наводите курсор мыши на продукт и получаете расширенный div, показывающий вам детали.Конечно, из-за этой панели прокрутки моя задача немного сложнее.

1 Ответ

2 голосов
/ 18 августа 2010

Не должно быть слишком сложно, если вы используете .offset () метод при наведении .product.Что вы можете сделать, это:

  1. В вашем обработчике .product hover получите смещение продукта.Это даст вам позицию вашего продукта по отношению к документу.
  2. Затем создайте свой оверлейный div с информацией о продукте и добавьте его непосредственно к <body>.
  3. Установите оверлейный Div в положение: absolute и используйте значения, возвращенные из вызова смещения, чтобы позиционировать его.
  4. Наконец, убедитесь, что ваш оверлей имеет более высокий z-индекс, чем область прокрутки, и вы должны работать.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...