Question sur le hover

Est-il possible d'affecter un style sur un élément à partir d'un hover d'un autre élément ?

Dans mon cas précis, je souhaiterai affecter une autre couleur à mon <li> (en particulier la puce) au passage de la souris sur un <a> (cet élément <a> étant contenu dans mon <li>).
Modifié par SolMJ (29 Jan 2009 - 11:07)

Salut SolMJ,

Comme le dit si bien BeliG ci-dessous :
http://forum.alsacreations.com/topic-4-39456-1-Changement-special-darriere-plan-au-survol.html
Modifié par Mikerob (29 Jan 2009 - 11:38)

BONJOUR !

Je doute que cela soit possible sans passer par du javascript...

Une idée récente à creuser.

En relisant, pourquoi ne pas faire passer la puce sur le <a> et ainsi jouer avec le a:hover ? Tu peux aussi te servir du li:hover, mais pas compatible IE6.
Modifié par BeliG (29 Jan 2009 - 11:38)

Pour ton pb de puce, la solution rapide et pas cher serai de créer une class "puce" pour tes liens. Cette class contiendrais l'image de la puce normal, et du coup tu peux y mettre une autre images quand tu as un hover...
Modifié par Mikerob (29 Jan 2009 - 11:42)

Merci pour vos réponses.

BeliG a écrit :
En relisant, pourquoi ne pas faire passer la puce sur le <a> et ainsi jouer avec le a:hover ?

Je ne suis pas sûr de comprendre.

la propriété list-style-type n'est-elle pas réservée aux éléments li ?

BeliG a écrit :
Tu peux aussi te servir du li:hover, mais pas compatible IE6.

Oui j'ai déjà essayé, le soucis c'est que je peux être sur mon li sans être sur le a, du coup les deux hover peuvent être désynchronisés, ce que je ne souhaite pas)
Modifié par SolMJ (29 Jan 2009 - 13:54)

a écrit :

la propriété list-style-type n'est-elle pas réservée aux éléments li ?

La prorpiété list-style-type oui, mais la propriété background-image non un liens avec un image de puce te donnera le même effet non ?

Mikerob a écrit :

la propriété list-style-type n'est-elle pas réservée aux éléments li ?

La prorpiété list-style-type oui, mais la propriété background-image non un liens avec un image de puce te donnera le même effet non ?

Certes mais j'espérais une solution type moins "bidouille", de plus cela m'obligera à précharger l'image associée au hover (bidouille en plus).

Enfin je vais étudier les différentes solutions, merci
Modifié par SolMJ (29 Jan 2009 - 13:59)

Ben disons qu'entre utiliser une image sur un lien qui fera entre 1-3k (donc pas besoin de précharger), ou jouer avec le list-style-type + ajouter du code js pour changer l'image ou ajouter du js pour que ie6 gère la propriété :hover sur la balise li (mais comme tu l'as dit plus bas ya des effet de bord avec els balise a)...

Enfin si tu trouve une solution élégante, hésite pas à nous en fair eprofiter, sa serai cool

SolMJ a écrit :
Certes mais j'espérais une solution type moins "bidouille", de plus cela m'obligera à précharger l'image associée au hover (bidouille en plus).

Ça reste une solution propre. Une puce c'est de la déco, au même titre qu'une image d'arrière-plan.

Tu peux supprimer tout délai de transition entre les 2 images en utilisant la méthode du rollover avec une seule image.

Aïe, je voulais aller mettre en pratique l'astuce du rollover avec une seule image mais la page au-dessus n'est plus valide (passage à la v3 oblige). Et je ne retrouve pas l'article sur la nouvelle version

Please Help
Modifié par SolMJ (31 Jan 2009 - 19:26)

SolMJ a écrit :
Et je ne retrouve pas l'article sur la nouvelle version

Hello,

En effet, ce tuto faisait doublon avec un autre tuto qui détaillait cette technique.
Tu trouveras ce qui t'intéresse dans le tuto "Créer des menus en CSS", dans la partie "portes coulissantes".

Bonne chance

Merci

SolMJ a écrit :
Est-il possible d'affecter un style sur un élément à partir d'un hover d'un autre élément ?

Si l'élément survolé contient l'élément dont on veut modifier l'aspect, oui. Dans le sens inverse ou si les éléments ne sont pas imbriqués -> JavaScript.

SolMJ a écrit :
Certes mais j'espérais une solution type moins "bidouille", de plus cela m'obligera à précharger l'image associée au hover (bidouille en plus).

Bah de toute façon a) il n'y a pas de propriété list-style-color pour changer la couleur d'une puce uniquement, b) que tu utilises list-style-image ou background-image, tu as ce souci de préchargement d'images, c) les images de fond sont beaucoup plus souples à manipuler que list-style-image (qui est globalement inutile, et qu'on pour ainsi dire oublier), et enfin d) il faut apprendre à gérer les sprites en CSS pour éviter certains problèmes de préchargement d'images.

Florent V. a écrit :
il faut apprendre à gérer les sprites en CSS pour éviter certains problèmes de préchargement d'images.

Oui, après quelques recherches j'ai également pu lire que c'était bon pour les performances globales (moins de requêtes HTTP).

Bon sinon, dans le même sujet j'ai un cas un peu plus problématique.

Admettons que je veuille appliquer un effet d'hover mais cette fois, je n'ai plus un bloc avec un fond mais une balise img... exemple de cas :

<p>
	<a href='fichier.html'>
		<img src="fichier.png" title="..." alt="..." />
	</a>
</p>

Je ne peux plus ici changer d'image au survol du <a> puisque mon image relève cette fois du contenu (donc non modifiable en CSS)... impasse ?
Modifié par SolMJ (01 Feb 2009 - 12:03)

Salut,

Florent V. a écrit :

Si l'élément survolé contient l'élément dont on veut modifier l'aspect, oui. Dans le sens inverse ou si les éléments ne sont pas imbriqués -> JavaScript.

En résumé il te faut une image à l'état non survolé qui est dans le code html et une image à l'état survolé que tu substitue via JavaScript sur l'évènement onmouseover et que tu rétablis sur l'évènement onmouseout. Faire une recherche sur "JavaScript rollover" soit dans le forum soit avec Google.

SolMJ a écrit :
impasse ?

JavaScript.

Ok noté

Je reviens à la charge en ce qui concerne mon problème de puce.

Je voulais donc mettre une image en arrière plan sur mon a (en display block) et une autre pour l'effet d'hover. Le problème c'est que la méthode des sprites ne semble pas convenir car le conteneur n'a pas la même taille que la partie de l'image que je veux afficher...

Je pense que je vais donc utiliser la méthode la classe .cache pour précharger mon image (à moins que j'ai raté une étape sur la méthode des sprites... )
Modifié par SolMJ (01 Feb 2009 - 15:37)