CSS et rollover (transparence indésirable)

Version imprimable

Bonjour,

J'ai défini un CSS de 500 pixels de large dans lequel je mets une photo à droite (float : right)
J'y ajoute une texte qui va "s'enrouler" autour du texte (float: left).

but : Au passage de la souris sur la photo, une grande photo apparaisse par dessus le le tout.

J'ai trouvé une technique CSS qui permet au passage de la souris de faire apparaitre une image
voici le code tres simple à comprendre :
Code:

1 2 3 4 5 6 7 8 9 <div id="menu"> <ul> <img src=petite_image.png> <li> <ul><img src=grande_image.png></ul> </li> </ul> </div>
et dans le css :
Code:

1 2 3 4 5 6 7 8 #menu ul li ul { display:none; <------ on cache ce qui se trouve au niveau de <ul><li><ul> } #menu ul li:hover ul { display:block; <------ on affiche ce qui se trouve au niveau de <ul><li> }
Prb : Quand je survole la petite image, la grande image apparait mais le texte est au dessus : Je ne sais/vois pas ce qui se passe ?

merci pour les conseils

06/08/2007, 12h59
Bisûnûrs

Plusieurs erreurs / problèmes dans ton code :

- Ne fonctionne pas sur IE6 (la pseudo-classe hover ne fonctionnant alors que sur les liens).
- Un élément ul ne peut contenir que des éléments li.

merci

je vais corriger comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<div id="menu">
<ul>
  <li>
        <img src=petite_image.png>
	<a href=''><img src=grande_image.png></a>
  </li>
</ul>
</div>
 
CSS 
 
#menu ul li a {
	display:none; <------ on cache ce qui se trouve au niveau de <ul><li><a>
}
 
#menu ul li a:hover {
	display:block; <------ on affiche  ce qui se trouve au niveau de <ul><li><a>	
}

mais ça marche plus :(

C'est normal, si ton élément est en display:none, tu ne peux pas passer dessus.

Tu peux faire comme ça :

Code:

1
2
3
4
5
6
7
<div id="menu">
   <ul>
      <li>
         <a href="#">texte1<span>texte2</span></a>
      </li>
   </ul>
</div>

Code:

1
2
3
4
5
6
#menu ul li a span{
   display:none;
}
#menu ul li a:hover span{
   display:block;
}

06/08/2007, 18h53
altantic.mac

merci

rectificatif : ça ne marche pas avec IE6

le texte n'apparait pas et sous Firefox/safari, il est toujours au dessus de l'image affichée

voici un exemple (firefox) : ici

Je ne comprends pas bien l'intérêt du ul li...?

C'est normal que ton image apparaisse au-dessous du texte puisqu'elle est placée avant dans le html. Elle passera dessus si tu lui attribues un position:relative ou absolu, selon comment tu veux la positionner.

Pour que IE6 fonctionne correctement à l'affichage d'élément à l'intérieur de la balise a il faut lui attribuer une propriété bidon sur le hover tout court genre:

Code:

a:hover {border:0;}

Voici un petit exemple qui devrait correspondre à ce que tu souhaites obtenir:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Document sans nom</title>
		<style type="text/css">
                        .photo {float:right;position:relative;}
                        .photo span  {display:none;}
                        .photo:hover {border:0;} /* bug IE6 */
                        .photo:hover span{display:block;position:absolute;top:100px;right:100px;}
                </style>
	</head>
	<body>
		<p>
			<a href="#" class="photo">
				<img src="img.jpg" border="1" height="180" width="240"><span><img src="bigimg.jpg" border="1" height="360" width="480"></span>
			</a>
			blablabla
		</p>
	</body>
</html>

13/08/2007, 14h58
altantic.mac

merci beaucoup

je vais essayer ce soir