Partage

Déplacer des div après survol d'un autre div

Sujet résolu
11 juin 2018 à 2:08:54

Bonjour à toutes et à tous,

J'aimerais faire un trombinoscope sur mon site dans lesquels les visages apparaissent au sein de petits cercles (j'utilise des divs pour les containers) et les cercles se survolent l'un l'autre. Une fois que l'utilisateur passe la souris sur un de ces cercles, j'aimerais qu'un espace se crée entre chacun d'entre eux. Je voulais savoir si c'était possible avec du CSS ou s'il valait mieux passer par du javascript pour cela. Je vous montre visuellement l'effet désiré :

Je vous remercie d'avance pour votre aide et vous souhaite une bonne journée !

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
11 juin 2018 à 7:05:48

Coucou,

sans code on ne peut rien pour toi (n'oublie pas d'utiliser le bouton </> pour poster ton code).

Merci =)

11 juin 2018 à 11:21:55

Tu veux que les cercles soient clicables ?

Si tu ne veux qu'une animation, je pense que CSS devrait suffire. Si tu veux une réaction dynamique, JavaScript me semble mieux. :)

(je suis débutant)

11 juin 2018 à 12:13:44

Résolu : je suis passé par du JS.

-
Edité par Emphytos 11 juin 2018 à 13:21:25

13 juin 2018 à 1:56:06

Peux-tu en dire un peu plus pour celle ou celui qui lira ton message dans la quête d'une solution à son problème ? Merci d'avance, et bon dev !
13 juin 2018 à 19:13:29

Oui mille excuses !

Étant donné que je voulais que le survol du div contenant les cercles créent une marge entre les 3 ronds j'ai décidé de passer par du javascript étant donné (qu'à ma connaissance) on ne peut pas le faire en CSS3 (le :hover peut avoir un effet sur une autre balise mais pas sur deux autres, sauf si je fais erreur).

Voici donc le code :

https://jsfiddle.net/Dostoiv/f9te8bkc/9/

Encore une fois : peut-être est-ce possible en CSS3 mais au moins ce code est fonctionnel grâce au JS.

Déplacer des div après survol d'un autre div

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown