Simuler (forcer) le hover css

**Difré91** · 17/05/2010, 13h35

Bonjour à tous.

Je souhaite, pour la réalisation d'un site, au passage de la souris sur un élément de la page, simuler le passage de la souris sur un autre élément en même temps.

Je m'explique :

J'ai deux phrases dans ma pages et je souhaite lier les mots deux à deux, voici la partie html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
  <body>
    <div>
      <span class="token1" onmouseover="classHover(this);" onmouseout="classUnHover(this);">A</span>
      <span class="token2" onmouseover="classHover(this);" onmouseout="classUnHover(this);">big</span>
      <span class="token3" onmouseover="classHover(this);" onmouseout="classUnHover(this);">blue</span>
      <span class="token4" onmouseover="classHover(this);" onmouseout="classUnHover(this);">bird</span>
      <span>.</span>
    </div>
 
    <div>
      <span class="token1" onmouseover="classHover(this);" onmouseout="classUnHover(this);">Un</span>
      <span class="token2" onmouseover="classHover(this);" onmouseout="classUnHover(this);">gros</span>
      <span class="token4" onmouseover="classHover(this);" onmouseout="classUnHover(this);">oiseau</span>
      <span class="token3" onmouseover="classHover(this);" onmouseout="classUnHover(this);">bleu</span>
      <span>.</span>
    </div>
  </body>

Les spans ont déjà un style :hover en css défini. Jusque là, sans javascript, au survol d'un mot par la souris, le mot est entouré par une border.

Ce que je veux, c'est que lorsque je survole par exemple le mot "A" qui est de la classe "token1", le javascript simule un hover sur le mot "Un" de la même classe pour qu'il aille chercher sa propriété :hover dans le CSS.

Je ne veux pas (c'est ce que j'ai déjà fait en réalité) modifier le style du span avec .css(attribut, valeur) car cela me forcerait à écrire en dur dans mon code Javascript les propriétés CSS que je veux appliquer.

Je voudrais pouvoir dire au navigateur que l'on est aussi en train de survoler le deuxième élement et qu'il aille chercher les propriété adéquate dans la feuille CSS qui va bien.

Voila, j'espère m'être fait comprendre, en espérant vos réponses.

__________________________________________
Difré

**bigboomshakala** · 17/05/2010, 20h53

Envoyé par Difré91

Je voudrais pouvoir dire au navigateur que l'on est aussi en train de survoler le deuxième élement et qu'il aille chercher les propriété adéquate dans la feuille CSS qui va bien.

Pas possible. Le navigateur ne fera un hover sur un élément que s'il est effectivement survolé par la souris. Si tu veux réaliser ce dont tu parles, le moyen est d'intercepter en javascript le mouseover et le mouseout sur les éléments voulus.

sur le mouseover : basculer le className des éléments de même classe que l'élément survolé (l'élément survolé inclus) avec le css "mouseover"
sur le mouseout : idem avec css précédent

**Difré91** · 18/05/2010, 10h35

Oui, je vois, en reflechissant, j'étais arrivé aux même conclusions.
En gros, au lieu d'avoir une classe css du type : .className:hover, j'aurais .className_hover qui fait la même chose et que j'appelle au mouseover.

Merci de la réponse !

Simuler (forcer) le hover css

JavaScript

Discussions similaires

Partager

Partager