Afficher une div dans le port de vue

Question

J'ai une galerie d'images, qui affiche des images dans une matrice 5X5. Chaque image a une fonction onmouseover où dans un div caché est affiché avec quelques détails sur l'image et la div avec les détails est caché en utilisant onmouseout. La div qui contient les détails sur l'image peut contenir des liens cliquables et donc j'affiche la div juste sous la position du curseur.

Le problème auquel je suis confronté concerne les images de la 5ème colonne. Si la div contenant les détails contient plus de contenu, elle crée une barre de défilement horizontale et les détails sont tronqués. Comment afficher toujours les détails div à l'intérieur du port de vue juste sous le curseur?

Il n'y a pas grand-chose à mais voici le code

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'; 
} 

Merci beaucoup

Answer 1

Essayez overflow:hidden

Answer 2

vous devez utiliser CSS positionnement absolu pour les détails div position:absolute, et aussi extraire les emplacement de la souris à partir de l'objet événement (how-to) afin d'appliquer les valeurs x et y de la souris aux propriétés CSS gauche et supérieure de la div ..