28234 sujets

CSS et mise en forme, CSS3

[Résolu] Rollover images

Bonjour, j'ai un fichier html avec 3 images. Je voudrai que quand je survole la première l'apparence de la deuxième change, pareil avec la deuxième avec la troisième et la même avec la troisième et la première. Est-ce que je suis obligé d'utiliser du java script pour faire ça ou est-ce que c'est possible juste en CSS3 ?
Merci pour ceux qui ont pris la peine de me lire ou de me répondre Smiley smile
Modérateur
Bonjour,

Ça dépend !

1) tes images sont-elles dans le html sous forme de balises <img> ou bien sont-elles en background d'autres balises ?
2) c'est quel genre d'effet que tu veux obtenir ? remplacer l'image elle-même par une autre ? ou bien changer son fond, ses bordures, ... ?
3) as-tu le droit d'ajouter des éléments HTML dans ton HTML de base (genre dupliquer l'une des images) ?

Selon les contraintes que tu imposes et ce que tu veux obtenir, la réponse est différente.

Amicalement,
Administrateur
Bonjour et bienvenue, Smiley smile

tu peux en CSS détecter le survol d'un élément et agir sur un élément qui le suit (frère ou enfant).
Pas modifier l'attribut src du code HTML de l'image en CSS mais recouvrir d'une couleur translucide, d'un gradient ou autre effet visuel pourquoi pas.

En supposant que 1 est placé avant 2 lui-même placé avant 3 dans le code HTML :
Agir sur 2 au survol de 1 : possible
Agir sur 3 au survol de 2 (ou de 1) : possible
Agir sur 1 au survol de 3 : impossible

Il y en a forcément un placé avant les 2 autres qui ne pourra pas être stylé au survol des 2 autres...
Tu n'auras même pas besoin de 10 lignes de jQuery pour faire plus propre que toutes les astuces CSS que je suis en train d'imaginer, c'est bien plus préférable comme solution (mais il faudrait qu'on sache ce que tu veux faire réellement)
Modérateur
Bonjour,

Felipe a écrit :

Agir sur 1 au survol de 3 : impossible


Oui, mais si on se donne le droit de dupliquer une image, on peut rajouter une image 4 identique à l'image 1 et que l'on positionne au même endroit que la première. On pourra alors agir sur 4 au survol de 3 comme si on agissait sur 1. Et le code est du coup assez simple et sans js. D'où ma question dans ma réponse précédente : peut-on ajouter cet élément supplémentaire ?

EDIT : et on peut dans ce cas remplacer l'image 1 par une image complètement transparente pour style tranquillement l'image 4.

EDIT 2 : un petit jsfiddle pour la route http://jsfiddle.net/05udxmLm/

Amicalement,
Modifié par parsimonhi (14 Jan 2016 - 09:47)
Administrateur
J'ai tenté un truc similaire ce matin mais me suis rendu compte d'un truc : comment 2 va être modifié au survol de 1 si 1 est recouvert par 4 ?
Sur ce je vais voir ton Fiddle Smiley lol

EDIT : ah ouais ça fonctionne avec du texte. Smiley jap Je vais regarder avec mon test qui utilisait des images et un :before sur leur conteneur, j'ai peut-être cru trop tôt que ça allait pas fonctionner Smiley confus
EDIT2 : au pire avec pointer-events: none; ça fonctionnerait sauf sur IE
EDIT3 : il y a vraiment besoin de p-e: none; avec ma "solution" http://codepen.io/anon/pen/RrZvgd?editors=010 donc non, fausse piste de mon côté
Modifié par Felipe (14 Jan 2016 - 15:39)
Modérateur
Bonjour,

Que ce soit du texte ou des images, ça fonctionne exactement pareil : il suffit de faire en sorte que l'image 4 soit sous l'image 1 (par exemple avec un z-index:-1)

EDIT : @Felipe : par contre, avec une solution à base de :before ou :after comme tu l'envisageais, effectivement, ça ne suffira pas.

Amicalement,
Modifié par parsimonhi (14 Jan 2016 - 16:25)
Merci pour toutes vos réponses, je vais apprendre le java script et le framework Jquery pour faire cela car effectivement j'ai besoin de remonter dans le DOM (chose que j'avais pas conceptualisé au début). Encore merci pour m'avoir aiguillé Smiley smile
Modifié par titouuu (14 Jan 2016 - 18:28)
Sujet clos
Aller à