Pb Image(opacity avec un hover...)

24 octobre 2006 à 19:02:52

Bonjour,
J'ai un problème avec mon code...J'ai disposé 4images en ligne grâce à des li et un ul . Maintenant, je voudrais que quand on passe sa souris nul part, les images soient opaques. J'ai réussi sans trop de problème. Mais maintenant, je voudrais que quand le visiteur passe sa souris sur une image, l'image ne soit plus du tout opaque.J'ai réussi aussi sauf que, quand je passe ma souris sur une image, c'est toutes les images (les 4) qui ne sont plus opaque !
Voici mon code :

ma feuille de style:

#ensemble
{
width : auto;
margin-left: 0;
padding-top : 120px;
}
#image img
{
width:196px;
height: 412px;
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity: 0.50;
margin-left:3%;
}
#image:HOVER img
{
filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity: 1.00;
}
#ensemble_1 ul
{
margin : auto;
display : block;
}
#ensemble li
{
height: 412px;
width: 196px;
padding-left: 0;
padding-right: 0;
padding-top: 1px;
text-align: center;
font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
font-size:0.9em;
margin-right: 15px;
}

</code>

SnooZ

24 octobre 2006 à 19:21:40

c'est normal tu as fait #image: hover img fait pluto #image:hover

SuM41263

24 octobre 2006 à 20:20:02

Merci mais cela n'arrange rien...

Candygirl

24 octobre 2006 à 20:54:06

un id doit êtere unique sur ta page, hors tu as 4x id="image" pout tes 4 liens. Donc dans ce cas il faudrait utiliser une classe et non un id.

Maintenant, pas besoin d'ajouter une class ou un id à tes liens puisque tu as déjà attribué un id au ul. Tu peux noter ainsi, par exemple:

#ensemble a img
{
width:196px;
height: 412px;
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity: 0.50;
margin-left:3%;
}
#ensemble a:hover img
{
filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity: 1.00;
}

SuM41263

24 octobre 2006 à 21:29:44

Merci mais ça ne marche toujours pas... :euh:

Candygirl

24 octobre 2006 à 22:19:07

Ce bout de code vient de ta page:

tu dois mettre les balises a à l'intérieur des li, pas l'inverse

EDIT:

En fait, ce n'est pas la seule erreur, il y en a encore 3 autres:

1) Dans ton css design_index, tu as mis des .ensemble à la place de #ensemble

2) Dans ton design.css, tu définis ça:

#corps img
{
width:196px;
height: 412px;
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity: 0.50;
margin-right: 20px;
margin-top: 10px;
padding-top:0px;
}
#corps:HOVER img
{
filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity: 1.00;
margin-right: 20px;
margin-top: 10px;
padding-top:0px;
width:196px;
height: 412px;
}

que tu dois virer autrement, sur les navigateur que IE, il va te changer l'opacité de tes image dès que tu es sur le corps avec ta souris

3) Ta deuxième feuille de style n'est pas prise en compte par le navigateur à cause de ton attribut title que tu peux virer, plus d'info