Problème div/overflow

Problème div/overflow - HTML/CSS - Programmation

Marsh Posté le 08-08-2005 à 16:55:58    

Salut à tous,
 
J'ai besoin d'afficher un div qui fonctionnerait de la même manière que la balise alt d'une image sous IE (popup jaune qui s'affiche au passage de la souris dessus).
 
Le texte pouvant être très long, j'ai besoin d'un ascenseur.  
 
Après recherche sur le forum, j'ai repéré le style overflow, qui me donne le résultat escompté, sauf que lorsque je passe la souris sur mon div => il disparait.
 
Si mon explication n'est pas claire, je joins à la fin du post le code utilisé, avec les 2 cas.
 
Comment garder l'ascenseur, tout en évitant le clignotement du calque lorsqu'on passe la souris dessus ?  
 
Est-ce possible ?
 
Merci d'avance.
 

Code :
  1. <html>
  2. <head>
  3.  <style>
  5.   #login li {
  6.    border: 1px solid black;
  7.   }
  9.   #login li div {
  10.    position:absolute;
  11.    left:450px;
  12.    top:10px;
  13.    border:1px solid #990000;
  14.    background-color:#FFFFCC;
  15.    color:black;
  16.    width:200px;
  17.    padding:5px;
  18.    display:none;
  19.    z-index:20;
  20.   }
  22.   #login li:hover div {
  23.    display:block;
  24.   }
  26.   #login2 li {
  27.    border: 1px solid black;
  28.   }
  30.   #login2 li div {
  31.    position:absolute;
  32.    left:450px;
  33.    top:120px;
  34.    border:1px solid #990000;
  35.    background-color:#FFFFCC;
  36.    color:black;
  37.    width:200px;
  38.    height: 200px;
  39.    padding:5px;
  40.    display:none;
  41.    z-index:20;
  42.    overflow: auto;
  43.   }
  45.   #login2 li:hover div {
  46.    display:block;
  47.   }
  49.  </style>
  50.     </head>
  51. <body>
  52.  <ul id="login">
  53.   <li>
  54.    TEST 1 (le calque reste visible si on passe la souris dessus)
  56.    <div>
  57.     texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte
  58.    </div>
  59.   </li>
  60.  </ul>
  62.  <br><br><br>
  64.  <ul id="login2">
  65.   <li>
  66.    TEST 2 (le calque clignote si on passe la souris dessus)
  68.    <div>
  69.     texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte tex txt et  texte texte
  70.    </div>
  71.   </li>
  72.  </ul>
  74.  <br><br>
  76.  Est-ce possible d'avoir le calque avec le scroll, mais sans qu'il clignote lorsqu'on passe la souris dessus ?
  78. </body>
  79. </html>


Message édité par Blo_odyMarY le 08-08-2005 à 17:24:30
Reply

Marsh Posté le 08-08-2005 à 16:55:58   

Reply

Marsh Posté le 08-08-2005 à 17:03:29    

faut faire appel à du JS dans ton cas, c'est obligéa

Reply

Marsh Posté le 08-08-2005 à 17:08:21    

ok, je ne vois pas d'inconvénient à utiliser un peu de JS, mais peux-tu me mettre sur la voie stp ?  
 
je ne vois pas en quoi le JS va m'aider ?

Reply

Marsh Posté le 08-08-2005 à 17:09:29    

Blo_odyMarY a écrit :

Salut à tous,
J'ai besoin d'afficher un div qui fonctionnerait de la même manière que la balise title d'une image sous IE (popup jaune qui s'affiche au passage de la souris dessus).


 

Blo_odyMarY a écrit :


#login li:hover div {
  display:block;
}


Ca ne marchera pas sous IE ca :/ La pseudo class :hover ne s'applique que sur les balises <a> avec IE.

Reply

Marsh Posté le 08-08-2005 à 17:12:12    

Merci pour ta remarque, je vais utiliser des liens alors, ça ne me dérange pas. :)

Reply

Marsh Posté le 08-08-2005 à 17:15:17    

oubien onMouseOver
et n'oublies pas de fermer le <head> et définir le <style type="text/css">, j'imagine que c'est codé en vitesse pour illustrer l'exemple.


Message édité par dotfx le 08-08-2005 à 17:16:04

---------------
www.renderfarm.online
Reply

Marsh Posté le 08-08-2005 à 17:19:33    

oups j'ai pas fermé le <head>.
 
Oui j'ai codé ça vite fait, le code final ne sera pas aussi baclé. ;)
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed