CSS nav retournement combinant w texte html / graphique

S'il vous plaît voir le lien ci-dessous:
www (dot) f7digitaldesign (dot) com / Isaac / index-test.html

Remarquez la nav secondaire ci-dessous l'image sur la droite. Ce que je veux faire, c'est de garder les sous-titres gris comme du texte HTML et de les faire rougir la souris passe dessus, mais je veux aussi un peu de rouge pour faire apparaître le graphique en regard du texte rouge sur le vol stationnaire (comme indiqué sur la première »Textile Design" -- mais ce ne serait là on hover). Je ne peux penser à un moyen de le mettre en place w / o qui fait toutes les images à la navigation pure, toute idée comment faire cela? Est-il même possible?

Merci!
F7Brian

assez simple. Définir le texte de votre en-tête de navbar "display: block" dans votre css. Ensuite, utilisez le sélecteur de pseudo ": hover" pour définir l'état différent avec le graphisme et la couleur différentes.

Je ne regarde pas votre code de sorte que vous devrez ajuster ce à ce qui fonctionne pour vous, mais cela ne ferait que ressembler à ceci:



Qui devraient au moins vous mettre sur la bonne voie.

Merci! Je n'ai pas essayé votre suggestion, mais j'ai reçu celui d'un autre forum et cela a fonctionné:

Une façon d'y arriver est de mettre cette image dans chacun de vos tags H3 et ajoutez ceci à votre CSS:
Code:
. h3 contenu img (
display: none;
)
. contenu h3: hover img (
display: inline;
)

Une autre façon est de faire une chose semblable, mais utiliser l'image comme image de fond.

Le (petit) problème avec ces deux, c'est que certains navigateurs plus anciens ne seront pas en mesure de gérer le: hover sur la balise H3. Les navigateurs modernes devrait être OK.

I hope that helps.

Donc j'ai fait la première proposition et de son travail.

merci!

Si vous êtes inquiet pour les anciens navigateurs, vous pouvez utiliser javascript à la place.

navigateurs plus anciens ne hover appui sur une balise d'ancrage (<a>) utilisation afin mindfulsilences solution. Ses presque exactement la même chose sauf qu'elle a besoin d'un balisage beaucoup moins et est plus susceptible de travailler à travers un grand nombre de navigateurs.