Alors, voilà, je fais en ce moment un site web. Dans celui-ci, il y a des liens vers d'autres sites. À coté de chaque lien l'icone du site le précède, puis le nom du site encore après. Comme ceci :
[Icone] lien [nom du site]
En CSS, je souhaite que quand je survole l'icone, celle ci et le nom du site changent de couleur (et vice versa) avec :hover. Je ne veux pas en revanche que le lien change de couleur.
Le problème, c'est que je veux que quand je survole le lien, il ne soit le seul à changer de couleur. J'ai essayé des trucs avec .not(), mais ça n'a pas tellement marché. Il faudrait que je fasse une exception sur le :hover.
Comme ceci :
Quand [Icone] est survolé, [Icone] et "nom du site" changent de couleur (et vice versa).
Quand lien est survolé, lien change de couleur, mais pas [Icone] et "nom du site"
Je suis bloqué depuis pas mal de temps alors je pose la question ici.
Tu veux que quand on survole chaque élément (icône, lien et nom) distinctement, ils changent séparément de couleur ? Mais quel est l'intérêt, à part donner l'illusion à l'utilisateur qu'il y a trois liens distincts ? Ça n'a pas vraiment de sens. Mais à faire, c'est très simple : il suffit de mettre un hover sur chaque élément.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Tu veux que quand on survole chaque élément (icône, lien et nom) distinctement, ils changent séparément de couleur ? Mais quel est l'intérêt, à part donner l'illusion à l'utilisateur qu'il y a trois liens distincts ? Ça n'a pas vraiment de sens. Mais à faire, c'est très simple : il suffit de mettre un hover sur chaque élément.
Non pas du tout !
Comment expliquer ça ?
Donc on a ça : [Icone] lien "nom du site"
Quand [Icone] est survolé, [Icone] et "nom du site" changent de couleur (et vice versa).
Quand lien est survolé, lien change de couleur, mais pas [Icone] et "nom du site".
Ca aurait été plus facile si le lien n'avait pas été prit en sandwich
Par contre, pour le "vice versa" je ne crois pas que c'est possible en CSS. Donc si tu veux qu'en survolant le "Nom du site", [Icone] change aussi de couleur il faudra passait par du JavaScript car CSS ne permet de pas avec ses sélecteurs de "remonter" (que ce soit fils vers parent ou simplement de sélectionner un élement plus haut dans le DOM à partir d'un élement plus bas).
Par contre, pour le "vice versa" je ne crois pas que c'est possible en CSS. Donc si tu veux qu'en survolant le "Nom du site", [Icone] change aussi de couleur il faudra passait par du JavaScript car CSS ne permet de pas avec ses sélecteurs de "remonter" (que ce soit fils vers parent ou simplement de sélectionner un élement plus haut dans le DOM à partir d'un élement plus bas).
De plus, si tu veux absolument qu'en survolant le "Nom du site", l'icone change de couleur aussi alors voilà avec le script JS : https://jsfiddle.net/5p2mvp6w/26/
C'est une très bonne idée et ça éviterait un script pour rien cependant s'il fait ça, lorsqu'il survolera le lien et bien l'icone et le "Nom du site" changeront ausis de couleur non ?
De plus on ne connait pas forme/taille de la .box, ça pourrait être gênant s'il y'a d'autres éléments dedans par la suite, etc...A voir selon les besoins de l'OP.
- Edité par Grandioz 11 mars 2018 à 22:13:06
Exclure un élément prit en sandwich (CSS)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Pas d'aide concernant le code par MP, le forum est là pour ça :)