Bonjour à tous !

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.

Le code pour l'instant :

<p>
  <span class="box">
    <span class="icon"> 'icone' </span>
    <span class="lien"> 'lien' </span>
    <span class="nomdusite"> 'Nom du site' </span>
  </span>
<p>

.box .icon:hover {
  color: #ffffff;
}
  
.box .nomdusite:hover {
  color: #ffffff;
}

.box .lien:not(.icon .nomdusite):hover {
  color: #b43bff;
}

(j'ai pas mit direct le lien avec une balise <a href> pour que ce soit plus lisible)

Merci de vos réponse s'il y a une solution !

-
Edité par qnibru 11 mars 2018 à 20:45:39

Salut,

Déjà, où sont les liens ? Je n'en vois nulle part dans ton code. Ton énoncé n'est pas clair :

Le problème, c'est que je veux que quand je survole le lien, il ne soit le seul à changer de couleur.

Tu veux que tout change de couleur, ou que seul la partie "lien" change de couleur ?

Dans un cas comme dans l'autre, c'est relativement simple :

https://jsfiddle.net/qg2cqm1u/2/ ou https://jsfiddle.net/qg2cqm1u/4/ 

Et pour :not, vois la doc : https://developer.mozilla.org/fr/docs/Web/CSS/:not 

-
Edité par EmmanuelBeziat 11 mars 2018 à 19:08:58

rhooManu a écrit:

Salut,

Déjà, où sont les liens ? Je n'en vois nulle part dans ton code. Corrige déjà ça, ensuite on continuera.

Oui j'ai mit des <span> pour que ça soit plus lisible.

Sinon, je veux que seulement le lien change de couleur et pas l'icone et le nom du site.

Alors voilà avec un lien:

<p>
  <span class="box">
    <span class="icon"> 'icone' </span>
    <a class="lien" "href="https://twitter.com/">lien</a>
    <span class="nomdusite"> 'Nom du site' </span>
  </span>
<p>

-
Edité par qnibru 11 mars 2018 à 19:10:58

Hé ben voilà, il n'y a rien de plus à faire. Gère ton hover sur .lien, pas sur box. Regarde l'exemple que je t'ai donné ;) 

rhooManu a écrit:

Hé ben voilà, il n'y a rien de plus à faire. Gère ton hover sur .lien, pas sur box. Regarde l'exemple que je t'ai donné ;) 

Alors, il va falloir réfléchir au truc là.

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.

rhooManu a écrit:

Alors, il va falloir réfléchir au truc là.

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

C'est donc quelque chose comme ça que tu souhaites ? 

https://jsfiddle.net/5p2mvp6w/11/

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).

-
Edité par Grandioz 11 mars 2018 à 20:51:31

zacun a écrit:

C'est donc quelque chose comme ça que tu souhaites ? 

https://jsfiddle.net/5p2mvp6w/11/

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).

-
Edité par zacun il y a 2 minutes

OUI C'EST EXACTEMENT CA MERCI

Je connaissais pas du tout le ~, ça sert à quoi ?

Il s'agit d'un combinateur pour sélectionner des voisins.

https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_de_voisins_g%C3%A9n%C3%A9raux

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/

Bonjour,

sinon on peut mettre un :hover sur le parent (.box), qui change la couleur globale, et on force la même couleur qu'à la normale sur le lien.

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 ?

https://jsfiddle.net/5p2mvp6w/29/ 

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