Afficher 1 div caché à partir d'un lien hyper (en CSS de préf.)

bonjour,

je cherche le moyen, en code CCS de préférence, pour afficher un div caché lorsqu'on survole un lien hypertexte;
NB: vu que le div caché contient lui même des liens hypertextes, il faut bien sûr que je puisse y avoir accès lorsque ce div sera affiché

si ce n'est pas possible en CSS, peut être avec un code JS

merci de votre aide en tous cas
Modifié par maurice (11 Mar 2008 - 18:10)

Déjà, si tu veux un événement au clic, tu es obligé de passer par javascript (je ne crois pas que ça existe en CSS)

Deuxième chose, il faut que ta div à afficher ait un attribut id (unique à cette div)

La solution bête et méchante, insérer un attribut onclick dans ta balise <a>

<a href="tonlien.html" onclick="document.getElementById('exemple').style.display='block';return false;">Ton lien</a>
<div id="exemple">
 <a href="....">...</a>
....
</div>

Le return false empêche à IE 6 et FIREFOX de ne pas suivre le lien. Il me semble que ça ne marche pas sur ie7.

Attention : je souligne bien que ceci est une version brute, intrusive et pas du tout exemplaire.

Pour aller plus loin, voir les tutos, thread et tous les articles du web sur la façon de faire du javascript non intrusif

* La gestion des événements en javascript
* Comment bien coder en javascript ?
Modifié par trigun (11 Mar 2008 - 17:50)

merci pour cette réponse, mais - autant pour moi - ce n'est pas au clic mais au survol du lien que je voudrais afficher le div caché (j'ai modifié mon post en conséquence)

j'aurais plutôt pensé à une solution qui utiliserait l' attribut <:hover> sur un lien hypertexte exclusivement (pour que le résultat attendu fonctionne sous IE6 notamment) et en jouant avec l'attribut <visibility> de mon div caché;
en clair, il faudrait que, au survol de mon lien hypertexte avec la souris, mon div caché change son attribut <visibility: hidden> en <visibility: visible>, mais là je ne sais pas si on peut traduire ça en code CSS ou en JAVA, du moment que ça marche !

merci pour toutes suggestions
Modifié par maurice (11 Mar 2008 - 18:11)

trigun a écrit :
Déjà, si tu veux un événement au clic, tu es obligé de passer par javascript (je ne crois pas que ça existe en CSS)

En CSS: pseudo-classe :active. Mais c'est limité, de même que :hover, et bidouiller du comportement en CSS est une bêtise (pas fiable, ergonomie souvent lamentable, etc.).

maurice a écrit :
j'aurais plutôt pensé à une solution qui utiliserait l' attribut <:hover>

Perdu.

maurice a écrit :
en clair, il faudrait que, au survol de mon lien hypertexte avec la souris, mon div caché change son attribut <visibility: hidden> en <visibility: visible>, mais là je ne sais pas si on peut traduire ça en code CSS ou en JAVA, du moment que ça marche !

Dans l'idéal il te faut un document HTML bien structuré, mis en forme avec CSS, et en surcouche un script Javascript qui va venir masquer certains éléments, et ne les afficher qu'avec certaines actions de l'utilisateur, ici le survol d'un élément (pas forcément un lien côté HTML... d'ailleurs il se peut que cet élément soit inutile sans Javascript, et donc soit généré à la volée par le script JS).

Faire tout ceci correctement demande une expertise que tu n'as manifestement pas, et je t'invite donc à:
- soit acquérir cette expertise (apprendre Javascript notamment);
- soit imaginer un moyen différent (et plus «statique») d'accéder à la l'information ou aux fonctionnalités du site.

merci pour ta réponse, Florent

En fait j'avais déjà épluché le sujet en cherchant sur divers forums (y compris celui-ci) et comme tu dis, soit on est confronté au problème que pose cette fameuse fonction :hover (souvent ignoré par IE), soit il faut passer par du JS; je vais donc creuser de ce coté là je pense et, faute d'acquérir l'expertise, j'espère au moins trouver quelque chose qui s'approche de ce que je recherche

merci encore pour ta réponse