Existe-t-il un contraire à "hover" ??

bonjour !

bon, j'explique un peu le titre de ce post, parce que ça doit sembler curieux !


J'ai un menu (positionné le long d'une image en forme de "virgule", cf mon post d'hier !) qui a l'air comme ceci :


Quand on survole chaque item du menu, une sorte d'info-bulle apparaît dessous, j'ai donc utilisé une pseudo-classe "hover", et ça marche très bien.

Le souci, c'est que quand l'info-bulle rattachée à un item du menu s'affiche, les autres items du menu "passent par-dessus" (ça c'est uniquement dans IE, avec FF c'est tout bon !)

J'ai essayé de jouer avec les z-index de tout ce petit monde, mais rien n'y fait ...

voilà le CSS :

/* pour l'affichage d'un menu dans la virgule */
ul#navig {position:relative; width:1000px; height:350px; margin:0; padding: 0; background-image:url(images/virgule_PCI.jpg); background-repeat:no-repeat; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.9em;}
ul#navig li {position:absolute; list-style-type:none;}
li#nav-item1 {top:22px; left: 36px;}
li#nav-item2 {top:48px; left: 18px;}
li#nav-item3 {top:77px; left: 18px;}
li#nav-item4 {top:104px; left: 29px;}
li#nav-item5 {top:128px; left: 49px;}
li#nav-item6 {top:151px; left:87px;}
li#nav-item7 {top:171px; left:136px;}
li#nav-item8 {top:193px; left:196px;}
li#nav-item9  {top:208px; left: 278px;}
li#nav-item10 {top:218px; left: 360px;}
li#nav-item11 {top:230px; left: 444px;}
li#nav-item12 {top:248px; left: 537px;}
li#nav-item13 {top:260px; left: 644px;}
li#nav-item14 {top:269px; left: 740px;}
li#nav-item15 {top:275px; left: 841px;}
li#nav-item16 {top:287px; left: 910px;}
a.tooltip {color:#c00; z-index:2;}
a.tooltip b {display:none;}
a.tooltip:hover {border:0; position:relative; text-decoration:none;}
a.tooltip:hover b {display:block; z-index:200; position:absolute; top:23px; left:-5px; padding:12px; font-weight:normal; color:#000; border:1px solid #888; background:#ffc; width:220px;}
a.tooltip:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px; display:block; font-size:1em; background-color: #fff; background-image: url(images/tooltip.gif); background-position: 0 0;}

et un bout du code HTML :

<ul id="navig">

		<li id="nav-item1"><a class="tooltip" href=#>Apporter<b><em></em>
			PCI apporte depuis 35 annn&eacute;es son exp&eacute;rience au service de r&eacute;alisations dans les pulv&eacute;rulents et &eacute;quipements 
			sp&eacute;cifiques. <br />
			De plus, PCI collabore depuis 10 ans avec les industries nucl&eacute;aris&eacute;es.
		</b></a></li>
		
		<li id="nav-item2"><a class="tooltip" href=#>Analyser<b><em></em>
			Etre &agrave; l'&eacute;coute, d&eacute;couvrir la culture de l'entreprise, &eacute;valuer les savoir-faire, d&eacute;finir les contraintes : <br />
			c'est le r&ocirc;le de consultant de PCI.
		</b></a></li>
		
		<li id="nav-item3"><a class="tooltip" href=#>Proposer <b><em></em>
			PCI met son exp&eacute;rience à la disposition de ses clients afin de proposer des solutions adapt&eacute;es à leurs demandes.<br />Sur les points qui demandent 
			à &ecirc;tre approfondis, PCI peut &ecirc;tre amen&eacute; à proposer la mise en place d'un d&eacute;veloppement R&amp;D.
		</b></a></li>
		
		<li id="nav-item4"><a class="tooltip" href=#>Ma&icirc;triser <b><em></em>
			PCI joue le r&ocirc;le de ma&icirc;tre d'ouvrage, en participant à la prise en main de la totalit&eacute; du projet et en le menant jusqu'à son terme.<br />La 
			structure de l'entreprise peut s'adapter aux besoins des projets si n&eacute;cessaire.
		</b></a></li>
	</ul>

et en réfléchissant, avec mon esprit tordu, je me suis dit que s'il existait un contraire à "hover", je pourrais faire un truc du genre :
a.tooltip:pas_hover {z-index:0;} !

merci d'avance !!

MrsNilsson, bizarreries en tout genre
Modifié par mrs nilsson (10 Feb 2008 - 11:00)

bonjour

voir : http://www.siteduzero.com/tuto-3-5272-1-modifier-l-apparence-d-une-infobulle.html

il y a quelque chose pour corriger le bug d'IE mais ton z-index doit être mis à a.tooltip:hover au lieu de a.tooltip:hover b

bonjour Verdan, et merci pour ta réponse, j'ai mis du temps à revenir au sujet parce que j'ai dû sortir les armes de destruction massive pour me débarasser d'un vilain "ver" !!

a écrit :
ton z-index doit être mis à a.tooltip:hover au lieu de a.tooltip:hover b

j'ai essayé, mais ça n'a rien changé,

alors je suis allée voir le tuto sur le site du Zéro, et effectivement, il n'y a pas ce problème de "chevauchement" du texte de l'info-bulle et des autres "liens" vers des info-bulles, mais je n'arrive pas à reproduire ce comportement dans mon fichier ...

tout ce que j'obtiens, c'est ça (avec IE7, tout est ok avec FF) :



bon, je continue à creuser, mais si quelqu'un à une idée, je suis preneuse !!

merci !!

Mrs Nilsson

bonjour/bonsoir

La différence entre IE et Firefox , (par exemple) , provient de la façon dont son afficher les éléments a l'écran.

On peut simplifier en disant que chaque élément est affiché tour a tour , comme des calques transparents empilés.

Firefox , met les derniers calques sous les premiers , IE fait le contraire !

Quand le positionnement absolue intervient l'effet peut apparaitre ( note: en cas de positionnement relatif , IE repasse en avant plan l'élément concerne , dans le flux ou il se trouve ...et si il se trouve dans un élément en positionnement absolue , il n'y aura que dans cette zone 'parent' , que cette effet sera applicable.)

Ta tentative , démontre bien ce comportement d'IE (Il me semble que ce comportement apparait dans Opera ou ses versions antérieurs).

C'est ces effets que tu provoque , en cloisonnant chaque lien dans leur li par le positionnement en absolu où le z-index ne peut avoir d'effet que sur les élements contenu par ce li .
position:absolu = extrait du flux = espace d'affichage pas pris en compte par les autres et vice versa.

Ton z-index n'est pas inopérant mais applicable que dans la zone du parent en absolu.


Pour changer cela , il te faudrait:
garder ul en relatif
mettre les a en absolue.
Appliqué le z-index au a:hover (ou li:hover , la a:hover permet d'inclure les version dIE antérieur a la 7) Attention a appliqué le z-index a <a> et pas aux enfants de a , qui ne se positionneront que par rapport a leur <a> parent.

De cette façon le a n'est plus cloisonné seul dans le li mais dans ul .

A partir de la , le css te permet de les faire s'afficher les uns par rapport aux autres a des 'z-index' différents.

GC


Note : Dans IE le positionnement relatif (qui 'cloisonne' une zone pour la prendre comme reference d'espace d'affichage/positionement pour les enfants , comme dans les autres navigateur), a pour effet de 'forcer' le réaffichage de l'element concerné , comme si il etait le dernier apparu dans le flux de son/ses parent.(le calque transparent posé sur les autres).

Le positionnement relatif peut être parfois déconcertant dans IE , car jouant parfois des rôles inattendues (va rendre un élément dénué de layout visible par exemple sans forcément réglé d'autre probleme d'affichages ...)
Modifié par gcyrillus (14 Feb 2008 - 22:59)