28172 sujets

CSS et mise en forme, CSS3

Div qui change de background pendant et après le click

Bonsoir, j'essaye de créer un petit module (que vous pourrez utiliser si ça vous intéresse) de partage que l'on pourrait intégrer à la fin de son site, donc en gros, j'ai un bouton partager, je clique, une div apparait contenant des boutons de réseaux sociaux tout ça avec un style "launchpad" comme sur Lion seulement, j'aimerais que lorsque la div (celle qui contient les boutons de résaux sociaux) est ouverte, le bouton partager change (en l'occurrence changer le background-position), si possible, je préférerais le faire en CSS mais si on ne peut le faire que en java, bah le le ferai en java. Voilà, la démo du module est ICI.

Merci à vous
Modifié par xXjujo002Xx (22 Mar 2012 - 00:13)
Bonjour,
Tu ne pourras pas le faire qu'en CSS.
Toutefois, l'utilisation de JAVA me semblerait un peu bourrin pour ce que tu veux faire qui est très aisément réalisable avec une ligne de JavaScript et une de CSS =)
Il te faut utiliser une checkbox pour procéder comme dans cet exemple.
Ensuite, on se base dans le css sur le fait que la case soit cochée ou pas.

Le CSS explique très bien comment cela fonctionne.

Le carré gris est la checkbox,
Le texte bold on/off est rajouté avec css et déplacé pour être superposé à la checkbox
On utilise le sélecteur d'adjacence + pour cibler l'élément suivant...

Quand on a input:checked (pseudo-classe css3), on modifie le contenu du span:
input:checked + span.after { content : "bold on" }

Puis on modifie l'affichage de la div en dessous en fonction avec la même manière :
input + span + p
input:checked + span + p
oui mais dès lors que j'appelle le checkbox dans mon javascript, la case peut être cliqué mais pas cochée, c'est assez bizarre...
jai compris comment ça fonctionne, le problème est que la checkbox dès lors quelle est appelée dans mon javascript ne peu plus être coché.
Sujet clos
Aller à