CSS et rollover (transparence indésirable)

**altantic.mac** · 06/08/2007, 11h51

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 :

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

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 :

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

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

**Bisûnûrs** · 06/08/2007, 11h59

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.

**altantic.mac** · 06/08/2007, 12h34

merci

je vais corriger comme ceci :

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
 
<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

**Bisûnûrs** · 06/08/2007, 14h05

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

Tu peux faire comme ça :

Code html :

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

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

Code :

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

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

**altantic.mac** · 06/08/2007, 17h53

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

**Candygirl** · 13/08/2007, 12h41

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 :

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

a:hover {border:0;}

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

Code html :

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
<!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>

CSS et rollover (transparence indésirable)

CSS

Vue hybride

Discussions similaires

Partager

Partager