[Résolu] Action sur une autre balise

Bonjour,

Je souhaite qu'un élément soit modifié quand on en survole un autre, avec le principe
A:hover ~ B

Sauf que cela ne marche pas... Est-ce que cela peut être dû au fait que B est lui-même fils d'un div frère de A ?

Voici l'exemple :
https://codepen.io/mscou/pen/VwLrYJJ

Je souhaite modifier le style de #nord (boussole) en survolant #txt-nord (le texte NORD).

J'ai écris #txt-nord:hover ~ #nord {, mais cela ne fonctionne pas....

Avez-vous une idée svp ?

Merci !

Salut,

c'est parce que ta structure n'est pas si simple.
En suivant exactement ta structure cela donne :

#txt-nord:hover ~ div.boussole-img > a > #nord 

Que l'on peut éventuellement simplifier en :

#txt-nord:hover ~ div.boussole-img #nord

Après je trouve assez bizarre d'avoir une tel imbrication de div et de a ainsi qu'une multiplication des class et id

Tu devrais pouvoir définir des classes plus génériques (voir même utiliser des variables css et laisser le calcul de rotation directement en dehors dans la classe générique)

Génial, ça marche, merci.

Effectivement, je pense qu'il y a moyen de simplifier le code général, mais je ne suis pas un pro non plus, alors tant que ça marche, j'évite les complications

Mathieuu a écrit :

c'est parce que ta structure n'est pas si simple.

+1 le mieux étant de le faire en svg. C'est tellement mieux

L'idée ce n'est pas de faire des complications mais au contraire de faire des simplifications pour rendre le tout plus claire

Par exemple du point de vue block/inline, c'est assez bizarre d'avoir des divs dans des balises a (C'est un peu comme si tu prenais un livre il y a des paragraphes qui contiennent des lignes puis hop certaines lignes contiennent un paragraphe entier )

Même chose pour les classes, le principe au départ c'est d'être utilisable à plusieurs endroits, la dans certains cas tu pourrais presque toujours utiliser directement l'identifiant au lieu de la classe que ça reviendrait presque au même . Tu as certaines classes qui ont genre 90% en commun avec d'autres classes, cela serait plus simple de regroupé ces 90% dans une même classe. Et c'est encore doublé avec les classes selected

En simplifiant un peu, on peut par exemple obtenir https://jsfiddle.net/kxm3dgt0/ (en simplifiant juste la partie boussole image)

En gros :
- j'ai dégagé tous les a qui ne servait à rien d'autre qu'a déclencher le code javascript onclick
- j'ai mis le onclick directement sur les divs (idéalement j'aurai plutôt fait un addEventListener en javascript mais j'ai eu la flemme ) et j'ai modifié le paramètre pour que l'on obtiennent directement l’élément sur lequel on clique vu que l'on ne clique plus sur un a intermédiaire.
- j'ai dégagé toutes les classes img sud nord est ouest que j'ai remplacé par une classe unique .img-PointCardinal et même chose pour les classes selected qu'on limite au nécessaire.
Avec ces modifications, il n'y avait plus qu'un paramètre à changer... du coup j'ai mis une variable css que j'ai précisé directement dans le code html de chaque ligne.
Je sais qu'en théorie ce n'est pas bien, mais en pratique je trouve ça mieux dans ce cas la au lieu de rajouter un bout de code javascript qui les définit ou de rajouter plein de classes en css (on perd à mon goût l’intérêt de la variable utilisé dans ce sens la (i.e. un peu à l'envers de l'utilisation de base "je définis une variable que j'utilise partout ensuite"))
Modifié par Mathieuu (06 Mar 2020 - 15:35)