Показать div в окне просмотра

Question

У меня есть галерея изображений, которая отображает изображения в матрице 5X5. Каждое изображение имеет функцию onmouseover, в которой отображается скрытый элемент с некоторыми подробностями об изображении, а элемент с подробностями скрывается с помощью onmouseout. Div, который содержит детали об изображении, может содержать кликабельные ссылки, и, следовательно, я отображаю div прямо под позицией курсора.

Проблема, с которой я сталкиваюсь, связана с изображениями в 5-м столбце. Если у div, содержащего детали, есть больше контента, он создает горизонтальную полосу прокрутки и детали обрезаются. Как мне всегда показывать подробности div внутри порта просмотра под курсором?

Не так много, но вот код

function eventRollOver(id) {

    var did = 'img_'+id;
    document.getElementById(did).style.display='';
}
function eventRollOut(id) {
    var did = 'img_'+id;
    document.getElementById(did).style.display='none';
}

Большое спасибо

Answer 1

вам нужно будет использовать абсолютное позиционирование CSS для деталей div position:absolute, а также извлечь местоположение мыши из объекта события ( how-to ), чтобы применить значения x и y для указатель мыши слева и верхний CSS-свойства элемента div.

Answer 2

Попробуйте overflow:hidden