[resolu] "a:hover span" fonctionne, mais pas "a:hover i

bonjour,
j'ai longtemps cherché, et c'est le titre le moins mauvais que j'ai trouvé...

je m'explique. j'ai une suite de lien qui contiennent un span et une img. Je veux qu'au repos seulement l'img soit affiché, et qu'en survol seulement le span soit affiché.

cela fonctionne sous Firefox, mais apparement, IE n'aime pas que j'ecrive

a:hover img{display:none;}

- un exemple ici

- un extrait du code html :

<a href="./img1" class="mini">
	<span>img1</span>
	<img src="./mini-v.png" alt="img"/>
</a>

- un extrait du css:

.mini {
	background:url('./mini-o.png');
	border-top:1px solid #fff;
	border-left:1px solid #fff;
	width:100px;
	height:100px;
	display:block;float:left;
	text-align:center;
}

a.mini span {display:none;}
a.mini:hover span{display:inline; color:#000;background:#fff;}

a.mini img {display:block; }
a.mini:hover img{display:none;}

Je suis un peu perdu... selon moi, c'est un souci de IE plus que de mon code... mais je ne vois pas comment le contourner. j'ai essayé avec le proprieté display, la proprieté visibility, avec les z-index.... IE ne veut jamais virer l'img au survol.

Le sujet a deja été abordé ici mais pas vraiment resolu.

merci a tous.

opi
Modifié par Opi (12 Dec 2006 - 17:49)

Salut,

Ca me rappelle un problème que j'ai déjà rencontré avec IE. Est-ce que ça change quelque chose si tu rajoutes ceci :

a.mini:hover {background-position: 0;}

?

En dehors de ça, je me demande si tu ne peux pas organiser ton code plus proprement. En tout cas, le texte alternatif "img" est parfaitement inutile et même dommageable !
Modifié par Eldebaran (12 Dec 2006 - 17:40)

houhouuuuu !!!!!

ca fonctionne... merci ami canard... (au passage, j''aime beaucoup ton 'trait' )

pour ce qui est du texte alternatif.. c'est pour le test... chaque image sera differente, et donc le contenu de l'attribut alt sera lui aussi different.

encore mille fois merci...

opi


ps : as-tu d'autre remarque vis-a-vis de la propreté de mon code... y'a que comme ca qu'on apprends...

Opi a écrit :
ca fonctionne... merci ami canard... (au passage, j''aime beaucoup ton 'trait' )

Merci (même si je ne suis pas le dessinateur en question)

Opi a écrit :
ps : as-tu d'autre remarque vis-a-vis de la propreté de mon code... y'a que comme ca qu'on apprends...

Fais bien attention au fait que display: none;va masquer le texte à tous les dispositifs de navigation qui supportent les CSS. Il faut donc que tu offres la possibilité à tous ces dispositifs de l'afficher. Il ne faut donc sans doute pas se limiter à la pseudo-classe hover, mais y ajouter focus et active.

Ceci dit, je ne suis pas un pro de l'accessibilité, beaucoup de personnes sur ce forum te l'expliqueront bien mieux que moi.

Hello,

Pour ceux qui se demandent pourquoi la solution que j'ai proposée marche, Ingo Chao propose une explication (en anglais).
Modifié par Julien Royer (08 Feb 2007 - 09:43)