[CSS] bottom: 0 et animation

Dev
1

Bonjour à tous,

J’ai une colle pour vous. (CSS3 is welcome, JS not so). Dans un site, j’ai un div contenant n elements avec un bottom à 0px. Ce qui fait que la div est alignée en bas. Jusque là, tout va bien. J’ai fait une modification pour slide-down la div quand le curseur n’est pas dessus, en mettant un bottom à -xx px.

div { bottom: -50px; }
div:hover { bottom: 0px; }

Ca marchait bien tant que je connaissais la hauteur de l’élément div. Un récent dévelopement fait que maintenant cette div peut avoir des éléments qui s’ajoutent: je ne connais donc plus la hauteur de cet élément.

Est il possible de reproduire ce comportement avec une hauteur inconnue?

Note: Je connais la hauteur de tous les éléments internes par contre. Mais en css il n’est pas possible d’affecter une propriété a un élément en se basant sur le contenu de celui ci, donc je suppose que ca n’aide pas…

2

div { bottom: 0;display:block; }
div:hover { display:none;}

ça te conviendrais ? en js par contre tu peux faire l’effet, et avec jquery ça prend … 1 ligne.

3

Tu sais mettre un exemple en ligne quelque part ?

4

Vite en brouillon:

http://jsfiddle.net/XuhmK/

Quand on passe le curseur sur la zone rouge en bas, elle s’expand. J’aimerai que ca fonctionne sans préciser la hauteur de la div.

5

[CODE]

foo
bar
.hide {display:none} .handler:hover .hide {display:block}

[/CODE]

Le hic c’est que ça va foiré sur les nvigateur qui prennent pas en compte les sélecteur suivant un :hover (ie LT ?)

6

Comme ça ? http://jsfiddle.net/3nu5k/
Le :hover marche sur tous les éléments à partir d’IE7.

7

Tant qu’il n’y a pas d’éléments flottants, ça devrait fonctionner. Par contre, si flottant il y a, c’est plus compliqué (ou alors ajouter un br avec un clear both sur la fin).

Par contre, je ne vois clairement pas la valeur ajoutée de le faire en CSS, je trouve ça complètement anti ergonomique en plus (sauf si ton projet à vraiment 0 JS, auquel cas je peux le comprendre).