Gérer backgroundcolor sur un menu et son sous-menu.

Bonjour,
Je cale depuis 3 jours sur un menu vertical sur lequel je veux garder le background de l'onglet déclenché par l'évènement 'hover' (rouge) tant que je survole son sous-menu et puis qu'il revienne au background original tel qu'il était avant le 'hover'.
Voir ici sur mon site : http://homeusers.brutele.be/metalcat/

Les onglets qui ont un sous-menu : Bibliothèques, Assemblées générales, Conseils de copropriété et histoire.

J'ai essayé dans le JS : onmouseout="this.style.background='#ca0003'" au niveau du menu
et
onmouseout="document.getElementById('id').this.style.background='#8f8f8f'" (background original)
au niveau du sous-menu mais ce dernier ne va pas, le background reste à '#ca0003'.

Quelqu'un peut-il m'aider svp ? D'avance merci

Guy

menu.principal.css

#menu{
	position:fixed; top:170px; left:40px;
	color:#fff; width:145px;
		}

.menu {
position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
  color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	padding-left:5px;
	padding-top:3px;
	height:18px;
	display:block;
	
}

#menu div a:hover, #menu div a:active {
	background:#ca0003; /* rouge */
}
.sousmenu{
  position:absolute;
	left:145px;
	top:0;
	width:120px;
	}

.sousmenu_histoire{
  position:absolute;
	left:145px;
	top:0;
  width:220px;
}

menu_principal.JS :

function affiche(id) {

var d = document.getElementById(id);
	for (var i = 1; i<=9; i++) {
		if (document.getElementById('sousmenu'+i)) {document.getElementById('sousmenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

document.write("<div id=\"menu\"> ");

// <!-- accueil -->
document.write( "	<div class=\"menu\" id=\"accueil\" onmouseover=\"affiche()\">" );
document.write( " <a href=\"index.htm\">Accueil</a></div>" );

// <!-- galerie -->
document.write( "	<div class=\"menu\" id=\"galerie\" onmouseover=\"affiche()\">" );
document.write( "	<a href=\"galerie.html\">Galerie</a></div>" );

// <!-- bibliothèques -->
document.write( " <div class='menu' id='bibliotheques' onmouseover=\"affiche('sousmenu3');\" onmouseout=\"affiche();\">" );
document.write( " <a href=\"#\" onclick=\"window.location.reload()\">Biblioth&egrave;ques</a>" );
document.write( "  <div class=\"sousmenu\" id=\"sousmenu3\" style=\"display:none\" onmouseout=\"affiche();\" >" );
document.write( "   <div><a href=\"http://homeusers.brutele.be/metalcat/bibliotheque-1.htm\">Phase 1</a></div>" );
document.write( "   <div><a href=\"http://homeusers.brutele.be/metalcat/bibliotheque-2.htm\">Phase 2</a></div>" );

document.write( "  </div>" );
document.write( " </div>" );

// <!-- contacts -->
document.write( "	<div class=\"menu\" id=\"contacts\" onmouseover=\"affiche()\">" );
document.write( "	<a href=\"contacts.htm\">Contacts</a></div>" );

// <!-- assemblées -->
document.write( "	<div class=\"menu\" id=\"assemblees\" onmouseover=\"affiche('sousmenu6')\" onmouseout=\"affiche();\">" );
document.write( "	<a href=\"#\" onclick=\"window.location.reload()\">Assembl&eacute;es g&eacute;n&eacute;rales</a>" );
document.write( "	 <div class=\"sousmenu\" id=\"sousmenu6\" style=\"display:none\" onmouseout=\"affiche()\">" );
document.write( "		<div><a href=\"http://homeusers.brutele.be/metalcat/assemblees-generales-1.html\">Phase 1</a></div>" );
document.write( "		<div><a href=\"http://homeusers.brutele.be/metalcat/assemblees-generales-2.html\">Phase 2</a></div>" );
document.write( "	 </div>" );
document.write( "	</div>" );

// <!-- conseils de copopriété -->
document.write( "	<div class=\"menu\" id=\"cc\" onmouseover=\"affiche('sousmenu7')\" onmouseout=\"affiche();\">" );
document.write( "	<a href=\"#\" onclick=\"window.location.reload()\">Conseils de copropri&eacute;t&eacute;</a>" );
document.write( "	 <div class=\"sousmenu\" id=\"sousmenu7\" style=\"display:none\" onmouseout=\"affiche()\">" );
document.write( "		<div><a href=\"http://homeusers.brutele.be/metalcat/conseildegerance-1.htm\">Phase 1</a></div>" );
document.write( "		<div><a href=\"http://homeusers.brutele.be/metalcat/conseildegerance-2.htm\">Phase 2</a></div>" );
document.write( "	 </div>" );
document.write( "	</div>" );

// <!-- histoire -->
document.write( "	<div class=\"menu\" id=\"histoire\" onmouseover=\"affiche('sousmenu8')\" onmouseout=\"affiche();\">" );
document.write( "	<a href=\"#\" onclick=\"window.location.reload()\">Histoire</a>" );
document.write( "	 <div class=\"sousmenu_histoire\" id=\"sousmenu8\" style=\"display:none\" onmouseout=\"affiche(this);\">" );
document.write( "		<div><a href=\"lesvenelles-presentation.htm\">Pr&eacute;sentation</a></div>" );
document.write( "		<div><a href=\"naissancedesvenelles.htm\">Comment sont n&eacute;es les Venelles</a></div>" );
document.write( "		<div><a href=\"coutfinancementduprojet.htm\">Cout et financement</a></div>" );
document.write( "		<div><a href=\"maquettes.htm\">Maquettes</a></div>" );
document.write( "		<div><a href=\"construction.htm\">Construction</a></div>" );
document.write( "		<div><a href=\"archives-communales-convention-commune-ausia.htm\">Archives communales</a></div>" );
document.write( "	 </div>" );
document.write( "	</div>" );

// <!-- dossiers -->
document.write( "	<div class=\"menu\" id=\"dossiers\" onmouseover=\"affiche(this)\"><a href=\"dossiers.htm\">Dossiers</a></div>" );

// <!-- le livre d'or -->
document.write( "	<div class=\"menu\" id=\"lelivredor\" onmouseover=\"affiche()\">" );
document.write( "	<a href=\"http://w2.webreseau.com/fr/services/guestbook/messages.asp?id=559083\">Le livre d\"or</a></div>" );

document.write( "	</div>");

Salut,

Essaye ça

#menu div:hover > a {
	background:#ca0003; /* rouge */
}

Garantit 100% css !

Bonne soirée.

Salut Greg_Lumière,
Merci pour ta réponse. ça marche mais ce n'est pas parfait et c'est ma faute. J'ai omis de signaler ceci présent sur ma page HTML :
[code=css
#menu, .sousmenu, .sousmenu_histoire {background:#8f8f8f; color:#fff;} /*onglets gris*/
#galerie, #contacts, #cc, #dossiers {background:#22427c} /*onglets couleur de fond*/
][/code]

Si j'enlève ces 2 lignes ça marche autrement le background revient à l'original (gris ou couleur de fond)dès que la souris va sur le sous-menu. Ce doit-être #menu à la 1ère ligne qui est en cause.

Une petite question encore si tu veux bien : Que signifie le signe '>' dans ta réponse ? J'ai déjà cherché sur Google mais je n'ai pas encore trouvé de tuto qui en parle vraiment. Merci d'avance.

Cordialement
Guy
Modifié par metalcat (19 May 2016 - 00:47)

metalcat a écrit :

Merci pour ta réponse

De rien, ça m'a prit deux secondes et si ça peut t'aider alors je n'ai pas perdu mon temps

metalcat a écrit :
ce n'est pas parfait et c'est ma faute

au vu de ce qui suit, je confirme.

metalcat a écrit :
J'ai omis de signaler ceci présent sur ma page HTML :

#menu, .sousmenu, .sousmenu_histoire {background:#8f8f8f; color:#fff;}     /*onglets gris*/
#galerie, #contacts, #cc, #dossiers {background:#22427c}     /*onglets couleur de fond*/
]

Tu es trop précis dans tes déclarations de propriétés. Ici tes cibles sont repérées par leur ID, élément qui a un poids trop important.
Le poids d'un sélecteur défini sa "force" par rapport à d'autres. C'est comme Tyson face au Petit Poucet. Tyson force +100, LPP force +1. LPP n'arrivera jamais à faire appliquer ses propriétés

L'échelle de poids :
- balise (div, span, a, li etc) : 1
- Class (.nom_de_classe) : 1 000
- ID (#nom) : 10 000
PS : chiffres bidon, mais qui donnent un ordre de grandeur. Des articles plus détaillés expliquent cet effet avec les valeurs réelles que je n'ai plus en tête.

Du coup ces déclarations, écrasent les précédentes.

D'autre part n'oublie pas que l'ordre de déclaration est important dans la mesure où les propriétés sont appliquée suivant l'effet de cascade.

metalcat a écrit :
Ce doit-être #menu à la 1ère ligne qui est en cause.

Ton intuition est bonne, maintenant tu sais pourquoi.

metalcat a écrit :
Que signifie le signe '>' dans ta réponse ? J'ai déjà cherché sur Google mais je n'ai pas encore trouvé de tuto qui en parle vraiment.

Une bonne chose : tu as cherché. Par contre le mot-clé qui t'aurait envoyé une réponse adéquat est ' sélecteur ' car il s'agit là d'un sélecteur css.


Donc pour résumer, il te faut réviser les points suivants :
- le ciblage => préférer l'usage de classe aux Id
- l'effet de cascade => en faire une force et non une contrainte
- les sélecteurs => méga-vachement-super-important car méga-vachement-super-coool et méga-vachement-super-essentiel en css donc: à maitriser.

Pour les deux premiers points c'est surtout ta méthode de travail que ça va toucher de prime abord (finies les ID à tout va). Pour le dernier, je ne peux que te suggérer de consulter ceci :W3Schools - CSS - Selectors


Pour en revenir à ton code actuel, il est fort probable que sachant tout ceci tu arrive à te dépatouiller pour ton menu. Sinon, l'idéal pour t'aider plus précisément serait de re-poster l'intégralité de ton code (TOUT ce qui concerne ton menu) tel que tu l'utilise [bien sûr en nettoyant les données sensibles, cela va de soi).


Note : Concernant l'usage des identifiants (#) : essaie de faire ton design SANS identifiant (dans la mesure du possible ; hors cas vraiment, mais vraiment spécifique et inévitable). Les Id, tu les réserves pour les ancres. Quand t'auras réussi ça...


Bonne journée.
Modifié par Greg_Lumiere (19 May 2016 - 07:08)

Hello,

Greg a écrit :
...
PS : chiffres bidon, mais qui donnent un ordre de grandeur. Des articles plus détaillés expliquent cet effet avec les valeurs réelles que je n'ai plus en tête.
...

J'aime bien ce "petit" article de chez nos amis d'Open Web (Laurent Denis inside)

Salut,
J'ai trouvé l'erreur en mettant opacity:0.5 au niveau du background: #8f8f8f (gris). Résultat: un gris rosé. Le background: #ca0003 (rouge) déclenché par le 'hover' et le background gris se superposaient. En cause, j'appelais 2x le javascript dans ma page HTML. Résidu d'un test antérieur.
Merci pour ton aide et tes conseils.
Guy