Pb sous IE avec liste survolable

Bonjour à tous,

Je souhaite afficher une liste d'éléments qui, lorsque je survole un élément avec la souris, affiche une description en face de l'élément. J'ai trouvé une solution qui fonctionne sous Firefox, mais pas sous IE (la description de l'élément est invisible). Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<HTML>
  <HEAD>
    <STYLE type='text/css'>
      li {
        position:relative;
      }
      a span {
        position:absolute;
        top:0px;
        left:1px;
        width: 1px;
        height:1px;
        overflow:hidden;
        border:1px solid black;
      }
      a:hover span {
        position:absolute;
        top:0px;
        left:250px;
        width:3em;
        height:3em;
      }
    </STYLE>
  </HEAD>
  <BODY>
      <ul>
        <li>
          <a href="#nogo">
             aaa
             <span>titi</span>
          </a>
        </li>
        <li>
          <a href="#nogo">
             aaa
             <span>titi</span>
          </a>
        </li>
      </ul>
 </BODY>
</HTML>

Merci pour votre aide :help:

Le style indiqué dans le a span ne s'applique pas uniquement au span de la balise a, mais aux deux!
Mais il serait plus judicieux de passer par des classes ou des identifiants.

Pour le span, il faut au debut le cacher par display:block, puis le faire apparaitre au survol avec display:inline;
Vu qu'au debut le span n'est pas visible, les styles que tu as mis ne servent à rien.

Pour IE, il faut rajouter en plus
Code:

1 2 3 a:hover { background:none; }
Ce qui donne
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <HTML> <HEAD> <STYLE type='text/css'> li { position:relative; } span { display:none; } a:hover { background:none; } a:hover span { display:inline; position:absolute; top:0px; left:250px; width:3em; height:3em; border:1px solid #000000; } </STYLE> </HEAD> <BODY> <ul> <li> <a href="#nogo"> aaa <span>titi</span> </a> </li> <li> <a href="#nogo"> aaa <span>titi</span> </a> </li> </ul> </BODY> </HTML>

Génial !!! Merci beaucoup pour tes explications claires et pédagogiques.