Pb sous IE avec liste survolable

**Schplaf** · 25/03/2006, 13h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Linaa** · 25/03/2006, 14h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	  a:hover {
	    background:none;
	  }

Ce qui donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Schplaf** · 25/03/2006, 16h35

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

Pb sous IE avec liste survolable

HTML

Discussions similaires

Partager

Partager