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

Vue hybride

Discussions similaires

Partager

Partager