Syntaxe pour ne pas afficher un "id" avec display: none;

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

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 :

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

En faisant

Code :

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 :

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 :

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

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

J'espère t'avoir aidé.

[dev45]

Envoyé par 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 :

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

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

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]

Envoyé par 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 :

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 :

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 :

a:hover #chocolat{display:block;}

[Ceddoc]

Envoyé par Candygirl

Hello,

Code :

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 :

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]

Envoyé par Candygirl

Hello,

Code :

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 :

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 :

 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!