Discussion :

[dev45]

Salut tout le monde.

Après avoir abandonner les backgrounds en css je vais essayer d'exposer mon problème plus clairement.

J'ai deux images placées les unes sur les autres, café et chocolat.

html

Code html :

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

1
2
 
<li><a href="lien">café<img id="café" src="http://" /> <img id="chocolat" src="http://" /></a></li>

css

les images sont placées les unes sur les autres grace au css suivant.

Code :

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

1
2
#café{position:absolute;top:25%; left:66%;}
#chocolat{position:absolute;top:25%;left:66%;}

En faisant

Code :

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

1
2
3
#chocolat{
display:none
}

Je n'affiche que l'image café

Ce que je n'arrive pas à faire c'est trouver la syntaxe (je ne sais même pas si elle existe) pour faire un truc du genre.

Code :

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

1
2
3
li:hover{
display:#chocolat
}

Afin que l'image chocolat passe au dessus de l'image café.

J'espère que vous allez pouvoir m'aider ! merci à vous!

[Ceddoc]

J'ai eu un peu de mal à comprendre précisément ce que tu voulais faire mais je dirais que ce que tu cherche c'est quelque chose de ce genre la :

Code :

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

#chocolat{display:block;}

Ou bien si c'est au niveau du déclenchement de tes instructions je ne sais pas faire en css mais je ferais javascript dans ce gout la:

Code :

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

<li onMouseOver="document.getElementById("chocolot").style.display=\"block\";">

J'espère t'avoir aidé.

[dev45]

J'ai eu un peu de mal à comprendre précisément ce que tu voulais faire mais je dirais que ce que tu cherche c'est quelque chose de ce genre la :

Code :

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

#chocolat{display:block;}

Ou bien si c'est au niveau du déclenchement de tes instructions je ne sais pas faire en css mais je ferais javascript dans ce gout la:

Code :

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

<li onMouseOver="document.getElementById("chocolot").style.display=\"block\";">

J'espère t'avoir aidé.

Oui ce que je veux faire c'est ce que tu as fait en javascript mais pour du css. Réaliser le #chocolat{display:block;} mais dans une accolade hover, qui serait du type "if hover display chocolat".

Peut être faut il passer par un langage de programmation un peu plus complexe.

[Ceddoc]

tu peux exploiter le hover sur ta div qui contient les images mais pas depuis un autre composant je pense.

Je veux dire par là que quelque chose comme ça marcherait:

Code :

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

1
2
3
4
#chocolat {display:block;} 
#chocolat:hover {display:none}
#cafe{display:none;} 
#cafe:hover {display:block}[/

mais que si tu veux le hover sur un élément disctinct ça marchera pas et il faudra que tu passe par du javascript

[dev45]

tu peux exploiter le hover sur ta div qui contient les images mais pas depuis un autre composant je pense.

Je veux dire par là que quelque chose comme ça marcherait:

Code :

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

1
2
3
4
#chocolat {display:block;} 
#chocolat:hover {display:none}
#cafe{display:none;} 
#cafe:hover {display:block}[/

mais que si tu veux le hover sur un élément disctinct ça marchera pas et il faudra que tu passe par du javascript

Aïe c'est bien ce qu'il me semblait. Je vais essayer de m'arranger avec ton code merci à toi!

[ornitho13]

j'ajouterai que le :hover n'est possible que sur des <a> sur IE6 via CSS sinon il faut utiliser le javascript.

[Candygirl]

Hello,

Code :

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

li:hover #chocolat{display:block;}

devrait correspondre à ce que tu cherches à faire, avec la restriction énoncée par ornitho13 concernant IE6. Après, vu que tu as un lien à l'intérieur, autant faire le :hover directement sur le lien:

Code :

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

a:hover #chocolat{display:block;}

[Ceddoc]

Hello,

Code :

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

li:hover #chocolat{display:block;}

devrait correspondre à ce que tu cherches à faire, avec la restriction énoncée par ornitho13 concernant IE6. Après, vu que tu as un lien à l'intérieur, autant faire le :hover directement sur le lien:

Code :

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

a:hover #chocolat{display:block;}

Tu veux dire qu'avec cette syntaxe ça va marcher? Je n'avais jamais vu mais pour moi cette ligne css voudrait dire que à chaque fois qu'on est en hover sur lien (de la page entière ou de la div chocolat?) on affiche la div chocolat? Bref quelques explications sur cette syntaxe m'intéresseraient.

[dev45]

Hello,

Code :

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

li:hover #chocolat{display:block;}

devrait correspondre à ce que tu cherches à faire, avec la restriction énoncée par ornitho13 concernant IE6. Après, vu que tu as un lien à l'intérieur, autant faire le :hover directement sur le lien:

Code :

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

a:hover #chocolat{display:block;}

A là franchement tu m'enlèves une épine du pied, ça fait trois jours que je galère avec ce bidule et j'arrive enfin à avoir quelque chose qui ressemble à ce que je cherchais!

Avec le code

Code :

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

 a:hover #chocolat

j'ai bien mon image qui s'affiche par dessus (ça ne marche pas avec le li).

Maintenant j'ai juste ma cellule qui est plus descend plus bas que l'image mais je vais essayer de me débrouiller!

En tout cas merci à vous tous!