[Résolu] Appliquer une règle au hover sur un autre élément (parent)

Bonjour,

Je cherche s'il est possible d'appliquer une règle à une liste entière, au survol d'un de ses éléments (li).

En pratique : http://bio.carburants.free.fr/cd/index.html
J'ai une image d'arrière-plan pour le menu (elle est moche, c'est juste pour la démo), et je souhaiterais que lorsqu'on survole un des éléments du menu, l'arrière-plan de tout le menu change, en décalant verticalement l'image.

Ça sera pour ensuite faire une barre de menu avec des bordures arrondies :

  Index   )   Truc    )   Chose   )   Bidule     )

avec une image contenant l'un en dessous de l'autre chaque élément "hoveré" (un peu comme celle qu'il y a là, avec en plus des arrondis).

Merci d'avance de votre aide !
Modifié par nico@nc (29 Dec 2007 - 12:19)

salut,

je ne crois pas que ca soit possible en CSS cepenadnt tu peux toujours le faire en JS mais tu sera confronté au cas ou le JS sera desactiver...
Modifié par hakkou (25 Dec 2007 - 14:00)

Et sinon, pas d'idée pour faire autrement ce menu avec éléments hoverisé comme sur http://www.alsacreations.com/ + des bords arrondis ?

Je pense avoir trouvé : faire se chevaucher les éléments sur la largeur de l'arrondi, puis mettre une image d'arrière plan au hover qui inclus l'arrondi.

Je teste ça.

Tadaaaa ! http://bio.carburants.free.fr/cd/

Le code :

#menuh {
	position:absolute;
	top:95px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none;
	background: url(img/menubar.png); // l'arrière-plan au repos
	height: 30px;
	overflow: hidden; // pour que ça ne déborde pas à droite et gauche
}

#menuh li {
	float: left;
	text-align:center;
}

#menuh li a {
	margin:0 -4px; // on fait se chevaucher les éléments de 8px, largeur de l'arrondi
	width: 138px; // ne pas oublier d'ajouter les 8px de chevauchement
	line-height:30px;
	display: block;
	color: #fff;
}

#menuh li.m1 a:hover {
	background: url(img/menubar.png) 784px 30px ; // le hover du premier élément du menu
}

#menuh li.m a:hover {
	background: url(img/menubar.png) 524px 30px ; // le hover de éléments au milieu du menu
}

#menuh li.m6 a:hover {
	background: url(img/menubar.png) 134px 30px ; // le hover de l'élément tout à droite
}

Et mon image :
http://www.enregistrersous.com/images2/vignettes_images/175573389320071229121610.png
Modifié par nico@nc (29 Dec 2007 - 12:34)

Pas mal
Il faudra centrer le menu sous IE7 et revoir les choses sous IE6
Bon courage et bien joué pour le menu

6l20 a écrit :

Il faudra centrer le menu sous IE7 et revoir les choses sous IE6

Il a suffit d'aligner le div contenant le menu pour corriger ça. Il y avait un autre problème avec IE6 ? Parce que je suis sous linux, tout ce que je vois c'est ce que donne IE NetRenderer (il faudra que je réinstalle ies4linux un de ces jours...).

Bonjour nico@nc,

Oui, ce n'était pas compliqué de centrer ton menu, je voulais juste te le signaler
Sous IE6, il me semble que la margin-top de ton id page n'est pas pris en compte, du coup ton entête se trouve collée en haut du viewport...

#page {
margin:[#blue]10px[/#] auto 0pt;
width:780px;
}

Ce qui, à mon humble avis, n'est pas plus mal puisque cela empêche justement de voir ta page "défiler" par le haut de l'entête, sur cet espace de 10 px...

Cdt,
Sylvain

nico@nc a écrit :
Je cherche s'il est possible d'appliquer une règle à une liste entière, au survol d'un de ses éléments (li).

Oui, avec un :hover sur le ul directement. Mais ça ne permet pas d'afficher une image de fond précise (ou une position précise) en fonction de l'item survolé, ce qui se fera effectivement en Javascript.

Ceci dit, dans l'absolu on ne fait rien de tout ça: on découpe les différentes images, et on s'occupe uniquement de changer l'image de fond de chaque item au survol.
La méthode d'intégration retenue (image unique pour tout le menu) manque cruellement de flexibilité.

Florent V. a écrit :
Ceci dit, dans l'absolu on ne fait rien de tout ça: on découpe les différentes images, et on s'occupe uniquement de changer l'image de fond de chaque item au survol.

Mais dans ce cas, il y a un petit temps de latence correspondant au chargement de la nouvelle image de fond je crois...

6l20 a écrit :
Ce qui, à mon humble avis, n'est pas plus mal puisque cela empêche justement de voir ta page "défiler" par le haut de l'entête, sur cet espace de 10 px...

Ah oui, je n'avais pas remarqué ça. Je vais corriger en ajoutant des rayures en haut de la photo en haut, puis coller le tout en haut, je pense (vive la méthode "bourrin" !).

nico@nc a écrit :

Mais dans ce cas, il y a un petit temps de latence correspondant au chargement de la nouvelle image de fond je crois...

pas forcément, tu fait la meme chose que ta fait pour ton menu mais cette fois ci ca sera des image pour chaque element, donc pour chaque element t'a une image qui contient l'etat normal et l'etat du survol (en dessous).

hakkou a écrit :

pas forcément, tu fait la meme chose que ta fait pour ton menu mais cette fois ci ca sera des image pour chaque element, donc pour chaque element t'a une image qui contient l'etat normal et l'etat du survol (en dessous).

En effet. J'essaierai de faire ça si je modifie mon menu, sinon je me contente de la solution actuelle.

En tout cas, merci à vous trois de votre aide !
Modifié par nico@nc (02 Jan 2008 - 16:43)