Navbar en mouse hover

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Navbar en mouse hover

Message par Naywayz Dim 20 Nov 2022 - 12:44

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Je voudrais pouvoir mettre ce qu'on appelle, je crois, un "mouse hover" ; c'est-à-dire, un changement de couleur (du gris à la couleur) au moment où on clique sur les boutons de la barre de navigation.

Mon overall_header étant déjà modifié pour placer les éléments tels que membres, recherche, etc... tout en haut de la page.

PS: sur le forum je n'ai réalisé qu'un seul bouton à l'heure actuelle (le recherche). Et j'aimerais que, lorsque je vais créer les autres boutons, ceux-ci s'illuminent en passant le curseur de la souris dessus.

Merci d'avance Wink
avatar

Naywayz
**

Messages : 65
Inscrit(e) le : 19/08/2013

http://opbnew.forumgratuit.ch/
Naywayz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navbar en mouse hover

Message par MlleAlys Dim 20 Nov 2022 - 21:17

Bonjour, je poste pour voir le lien du forum et si je peux aider.

EDIT : Vous pouvez facilement réaliser l'effet en css en ajoutant ce code dans votre feuille de style :
Code:
#bar_nav_standard a {
  filter: saturate(0);
}
#bar_nav_standard a:hover {
  filter: saturate(1);
}

le premier code :
#bar_nav_standard a = Les liens à l'intérieur de la #bar_nav_standart
filter: saturate(0) = filtre saturation à 0 (donc en noir et blanc)

deuxième code :
#bar_nav_standard a:hover = les liens survolés à l'intérieur de la #bar_nav_standart
filter: saturate(1) = filtre saturation à 1 (donc couleurs normales)

Donc les images seront en noir et blanc grace au premier code, et passeront en couleur seulement au survol du lien correspondant grâce au second code.
Il est également possible d'ajouter si vous souhaitez un effet de transition (apparition de la couleur plus graduelle, vitesse réglable, plutôt que d'un seul coup quand la souris est dessus)
MlleAlys

MlleAlys
Membre actif

Messages : 5968
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navbar en mouse hover

Message par Naywayz Dim 20 Nov 2022 - 22:10

Bonsoir,

Merci pour votre réponse (c'est la deuxième fois !) Smile

J'ai mis le code dans le fichier CSS mais, apparemment, aucun effet.
avatar

Naywayz
**

Messages : 65
Inscrit(e) le : 19/08/2013

http://opbnew.forumgratuit.ch/
Naywayz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Navbar en mouse hover

Message par MlleAlys Dim 20 Nov 2022 - 22:17

Alors lorsque j'inspecte votre forum, le code apparait bien, mais avec des caractères "parasites" qui faussent sa lecture :
Navbar en mouse hover Image113
Si les caractères apparaissent sur votre feuille de style, supprimez-les, sinon tentez de refaire le copier/coller, ou de refaire les espaces à la main.
Le code doit être ainsi :
Navbar en mouse hover Image114
MlleAlys

MlleAlys
Membre actif

Messages : 5968
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Navbar en mouse hover

Message par Naywayz Dim 20 Nov 2022 - 22:35

Cela marche à la perfection !

Un énorme merci de plus ; je prie les vertus célestes que vos plaisirs soient sans mélange, votre beauté durable, et votre bonheur sans fin ! Razz

avatar

Naywayz
**

Messages : 65
Inscrit(e) le : 19/08/2013

http://opbnew.forumgratuit.ch/
Naywayz a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum