28172 sujets

CSS et mise en forme, CSS3

[Résolu] HTML : Hover sur un menu et son contenu

Bonsoir à tous,

J'ai un problème sur mon site internet je souhaite mettre mon texte en noir (#000000) lorsque mon header est en hover. ..... HELP HELP (Lorsque header-bar est en hover je veux avoir en même temps menu-text en noir et plus en blanc.)

Merci d'avance et bonne soirée à tous

<header class="header-bar">

						<div class="branding">
					<div id="site-title" class="assistive-text">Galerie Diurne</div>
					<div id="site-description" class="assistive-text">Un site utilisant WordPress</div>
									</div>
		<nav class="navigation">

			<ul id="split_left-menu" class="main-nav underline-decoration upwards-line outside-item-remove-margin" role="menu" style=".header-bar: hover > .navigation > #split-left-menu > .menu-item
    a > .menu-item-text > .menu-text {     color: #000000; }
"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3204 first"><a href="http://preprod.crooqpub.com/diurne.com/qualite/" data-level="1"><span class="menu-item-text"><span class="menu-text">QUALITÉ</span></span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3513 has-children dt-mega-menu mega-full-width mega-column-3"><a href="http://preprod.crooqpub.com/diurne.com/tapis-tableaux-by-marcel-zelmanovitch/" data-level="1"><span class="menu-item-text"><span class="menu-text">COLLECTION</span></span></a><i class="next-level-button"></i><div class="dt-mega-menu-wrap" style="opacity: 0; visibility: hidden; left: -141.203px; width: 1440px;"><ul class="sub-nav"><li class="droite menu-item menu-item-type-post_type menu-item-object-page menu-item-3200 first no-link dt-mega-parent wf-1-3"><a href="http://preprod.crooqpub.com/diurne.com/tapis-tableaux-by-marcel-zelmanovitch/" data-level="2"><span class="menu-item-text"><span class="menu-text">TAPIS TABLEAUX<br>BY MARCEL ZELMANOVITCH</span></span></a></li> <li class="droite menu-item menu-item-type-post_type menu-item-object-page menu-item-3199 no-link dt-mega-parent wf-1-3"><a href="http://preprod.crooqpub.com/diurne.com/collection-contemporaines-et-signatures-une-expression-actuelle-du-tapis-dartisanat/" data-level="2"><span class="menu-item-text"><span class="menu-text">COLLECTION<br>CONTEMPORAINES</span></span></a></li> <li class="droite menu-item menu-item-type-post_type menu-item-object-page menu-item-3198 no-link dt-mega-parent wf-1-3"><a href="http://preprod.crooqpub.com/diurne.com/collection-classique-revisiter-lhistoire-des-arts-decoratifs/" data-level="2"><span class="menu-item-text"><span class="menu-text">COLLECTION<br>CLASSIQUE</span></span></a></li> </ul></div></li> </ul>
			
		</nav>

		<nav class="navigation">

			<ul id="split_right-menu" class="main-nav underline-decoration upwards-line outside-item-remove-margin" role="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3205 first has-children dt-mega-menu mega-full-width mega-column-1"><a href="#" target="_blank" data-level="1"><span class="menu-item-text"><span class="menu-text">Espace Pro</span></span></a><i class="next-level-button"></i><div class="dt-mega-menu-wrap"><ul class="sub-nav"></ul><ul class="sub-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3541 first no-link dt-mega-parent wf-1 new-row"><a href="http://preprod.crooqpub.com/diurne.com/brochures/" data-level="2"><span class="menu-item-text"><span class="menu-text">Télécharger nos brochures et plaquettes en format PDF</span></span></a></li> </ul><ul class="sub-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3208 no-link dt-mega-parent wf-1 new-row"><a href="#" data-level="2"><span class="menu-item-text"><span class="menu-text">Rechercher un tapis parmis les pièces immédiatement disponibles</span></span></a></li> </ul><ul class="sub-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3211 no-link dt-mega-parent wf-1 new-row"><a href="#" data-level="2"><span class="menu-item-text"><span class="menu-text">Retrouver vos tapis favoris</span></span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3515 no-link dt-mega-parent wf-1"><a href="http://preprod.crooqpub.com/diurne.com/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Fpreprod.crooqpub.com%2Fdiurne.com&amp;_wpnonce=7352075fbf" data-level="2"><span class="menu-item-text"><span class="menu-text"><u>Déconnexion</u></span></span></a></li> </ul></div></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3201"><a href="http://preprod.crooqpub.com/diurne.com/contact/" data-level="1"><span class="menu-item-text"><span class="menu-text">Contact</span></span></a></li> <li class="lang-item lang-item-32 lang-item-en menu-item menu-item-type-custom menu-item-object-custom menu-item-3516-en"><a href="http://preprod.crooqpub.com/diurne.com/en/home/" data-level="1" hreflang="en-US" lang="en-US"><span class="menu-item-text"><span class="menu-text">EN</span></span></a></li> </ul>
			
		</nav>

	</header>

Modifié par Crocky (20 Jun 2018 - 21:45)
2 options possibles :
- tu donnes l'adresse de ton site et on régle cela avec l'inspecteur Web de Firefox ou Chromium en une poignée de minutes
- Tu nous obliges à étudier ton code spaghetti, on envisage d'étudier ce tas dès que quelqu'un aurait un moment à perdre Smiley lol
bazooka07 a écrit :
2 options possibles :
- tu donnes l'adresse de ton site et on régle cela avec l'inspecteur Web de Firefox ou Chromium en une poignée de minutes
- Tu nous obliges à étudier ton code spaghetti, on envisage d'étudier ce tas dès que quelqu'un aurait un moment à perdre Smiley lol


J'adore l'option 1 Smiley cligne
Voici l'URL : ***

Merci de ton aide rapide Smiley biggrin
Modifié par Crocky (21 Jun 2018 - 12:04)
Quand je regarde tes régles CSS, je me dis :
"Pourquoi faire simple quand on peut faire compliqué"
Dans ton fichier custom.css, à la ligne n°5640, cette régle pose problème à mon avis :
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav > li > a,
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav > li > a .menu-text,
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav > li > a .subtitle-text,
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav > li > a:hover span,
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav > li.act > a > span {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    background: none;
}

Mets à part la régle pour
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav > li > a:hover span
et essaie 
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav > li > a:hover span {
     color: #000;
}
Mais vu l'usine à gaz que tu oses nous montrer, c'est pas gagné Smiley fache
Meilleure solution
bazooka07 a écrit :
Quand je regarde tes régles CSS, je me dis :
"Pourquoi faire simple quand on peut faire compliqué"
Dans ton fichier custom.css, à la ligne n°5640, cette régle pose problème à mon avis :
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav &gt; li &gt; a,
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav &gt; li &gt; a .menu-text,
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav &gt; li &gt; a .subtitle-text,
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav &gt; li &gt; a:hover span,
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav &gt; li.act &gt; a &gt; span {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    background: none;
}

Mets à part la régle pour
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav &gt; li &gt; a:hover span
et essaie 
.light-preset-color .masthead:not(#phantom):not(.sticky-on) .main-nav &gt; li &gt; a:hover span {
     color: #000;
}
Mais vu l'usine à gaz que tu oses nous montrer, c'est pas gagné Smiley fache


MERCI DE TON AIDE Smiley biggrin je vais regardé
Merci à tous de m'avoir aidé et merci à bazooka07 pour ta solution Smiley cligne
Modifié par Crocky (21 Jun 2018 - 12:04)
Sujet clos
Aller à