Afficher couleur et infos au survol qui reste persistant après avoir survolé l'élément [Résolu]

[majo59]

Bonjour,

Je début en HTML, et j'ai un petit problème, je vais essayer d'être clair

J'ai une liste de villes, chacune dans une balise <div>, lorsque je passe mon curseur dessus (:hover) le libellé de la ville change de couleur par rapport aux autres villes de la liste, pour la différencier.

Mais évidement, lorsque mon curseur n'est plus dessus, le nom de la ville redeviens comme les autres.

En fait, j'aimerais que lorsque je passe mon curseur dessus, et tant que mon curseur ne va pas sur une autre ville, les informations sur cette ville s'affiche sur le reste de ma page.

Si ce n'est pas possible, un clique sur le libellé de la ville pour en changer me conviendrais également.


Si je n'ai pas était très clair, redemandez moi ce que vous n'avez pas compris


Merci d'avance.

[Ceddoc]

Envoyé par majo59

Bonjour,

Je début en HTML, et j'ai un petit problème, je vais essayer d'être clair

J'ai une liste de villes, chacune dans une balise <div>...

J'aurais tendance à dire que tu t'embêterais beaucoup moins avec une liste de type:

Code :

1
2
3
4
<ul>
<li>Ville1</li>
<li>Ville2</li>
</ul>

Pour le reste, il te faudra du javascript avec du onMouseOver. Un script qui dirait: "Lorsque ma souris passe sur le nom d'une ville, si une ville est déjà sélectionnée je la désélectionne puis je colorie le nom de la nouvelle et j'affiche ses infos."

[majo59]

Bonjour,

Même en sachant que chaque ville à un fond particulier (noir sur fond gris lorsqu'on est pas dessus / blanc sur fond noir lorsqu'on est dessus)

J'ai pris les div pour inclure facilement des styles, peut-on faire pareil avec les ul/li?

[NoSmoking]

Bonjour,

Mais évidement, lorsque mon curseur n'est plus dessus, le nom de la ville redeviens comme les autres.

c'est le comportement normal obtenu en CSS, mais pour...

En fait, j'aimerais que lorsque je passe mon curseur dessus, et tant que mon curseur ne va pas sur une autre ville, les informations sur cette ville s'affiche sur le reste de ma page.

il faut te tourner vers le javascript et les événements onmouseout et onmouseover

[Ceddoc]

Envoyé par majo59

Bonjour,

Même en sachant que chaque ville à un fond particulier (noir sur fond gris lorsqu'on est pas dessus / blanc sur fond noir lorsqu'on est dessus)

J'ai pris les div pour inclure facilement des styles, peut-on faire pareil avec les ul/li?

oui et oui

pour faire simple en Javascript on peut gérer les propriétés CSS donc ce que tu peux faire en css simple tu peux en faire autant avec JavaScript plus CSS.

Pour l'utilisation des Listes à priori ce sera même plus simple de leur appliquer des styles mais il faut un certain degré d'expérience et je ne sais pas si ça te serait vraiment utile d'effectuer le changement maintenant. Mais la prochaine fois que tu dois faire quelque chose qui ressemble à une liste ou a un menu, les <ul><li> sont souvent plus indiqués.

[majo59]

Ok, merci!

Je vais chercher dans cette direction là, je pense que je vois le bout du tunnel

Je met le sujet en résolu pour pas que ça traine!