Открыть панель при нажатии кнопки [закрыто] ⇐ Html

[Anonymous]

Я хочу получить кнопку, при нажатии на которую открывается плавающая панель, содержащая ее. Примерно так:


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


Надеюсь, я ясно объяснил, что я хотел получить. Я вижу два подхода:

• Обернуть содержащую кнопку в div, расположить ее абсолютно и во время события наведения изменить ее форму. Минусы в том, что трудно манипулировать этим div.
• Используйте простую кнопку и добавьте скрываемый div для панели, которая содержит точную с точностью до пикселя перекрывающуюся копию исходной кнопки, и покажите эту панель при наведении курсора на кнопку исходного кода или открытую панель. Главный минус в том, что трудно сохранить это идеальное совпадение по пикселям, особенно когда заменяешь кнопку каким-то более сложным компонентом, и невозможно сохранить это соответствие.

Все остальные мои мысли, по сути, являются одним из этих двух. Но ни один из них мне не кажется хорошим, слишком неестественным, слишком много компромиссов. И я едва могу найти какие-то другие мысли, так как сложно описать мой запрос в Google. ТАК, каким может быть мой подход к созданию этой плавающей панели?
Обратите внимание: я предполагаю, что мой вопрос может быть неясен, и позже я собираюсь его пересмотреть и улучшить. Сейчас я с трудом могу объяснить, что хочу получить, поэтому мне трудно найти рецепты, и поэтому вопрос здесь.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -on-button