pseudo-class a:active qui ne fonctionne pas.

2 participants

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

Résolu pseudo-class a:active qui ne fonctionne pas.

Message par d-elirium Dim 21 Avr 2024 - 18:52

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://test-delirium-mv.forumactif.com/

Description du problème

bonsoir,
je me permets de glisser un petit message par ici car je souhaite ajouter un effet de style sur la navbar de mon forum dès que le lien est "actif". il s'agirait du même que celui de l'hover mais ne bougeant plus au clic. je ne sais pas si c'est possible? j'ai tenté avec a.mainmenu:active mais ça ne donne rien.
si une âme charitable passe par ici et connait la réponse, je l'en remercie d'avance! I love you
d-elirium

d-elirium
*

Messages : 48
Inscrit(e) le : 14/07/2022

https://test-delirium-mv.forumactif.com/
d-elirium a été remercié(e) par l'auteur de ce sujet.

Résolu Re: pseudo-class a:active qui ne fonctionne pas.

Message par Toryudo Mar 23 Avr 2024 - 18:44

Bonjour !

Je ne suis pas sûr d'avoir compris.
Pour l'instant, de base, le CSS que je vois sur la page est le suivant :
Code:
a.mainmenu {
  text-transform: uppercase;
  color: #cdcdcd;
  font: 7px var(--family1);
  letter-spacing: 1px;
  -webkit-transition: all 1s;
}

Vous avez donc une transition de 1 seconde sur toutes les propriétés CSS, c'est à dire que dès qu'elles doivent changer (d'une couleur à une autre par exemple), elles mettront une seconde à "transitionner" de la valeur initiale à la valeur finale. Ensuite, vous avez le :hover sur ces éléments :
Code:
a.mainmenu:hover {
  text-transform: uppercase;
  color: #fff;
  font: 8px var(--family4);
  letter-spacing: 1px;
  color: #afa891;
}
a:hover {
  text-decoration: none !important;
}

Comme prévu, il y a une transition au survol, transition qui dure 1 seconde.
Maintenant, quand vous parlez d'une action "au clic", quand vous parlez de :active, vous parlez de laisser le bouton de la souris enfoncé sur le lien. Si c'est bien ça, alors il y aura une transition là encore d'une seconde vers le "nouvel état", vers le nouveau CSS.

Je pense que vous parlez d'autre chose. Ce que vous voulez, vous, c'est qu'après avoir cliqué sur "citadins" (membres) et après avoir changé de page vers https://test-delirium-mv.forumactif.com/memberlist, alors sur cette nouvelle page, le bouton "citadins" aient le même CSS par défaut qu'un élément a.mainmenu:hover, c'est ça ? On ne serait pas du tout sur l'utilisation de :active finalement, ce serait tout autre chose.
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1459
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: pseudo-class a:active qui ne fonctionne pas.

Message par d-elirium Mer 24 Avr 2024 - 18:56

Bonsoir!
Vous avez compris, en effet, je souhaiterais que le lien actif et donc le bouton au clic soit "figé" sur le même effet de style que a.mainmenu:hover. Je pensais pouvoir passer par :active pour se faire mais ce n'est peut-être pas possible? Et dans ce cas j'ignore quelle autre solution serait appropriée pour y parvenir, ayant cherché sans grand résultat.
d-elirium

d-elirium
*

Messages : 48
Inscrit(e) le : 14/07/2022

https://test-delirium-mv.forumactif.com/
d-elirium a été remercié(e) par l'auteur de ce sujet.

Résolu Re: pseudo-class a:active qui ne fonctionne pas.

Message par d-elirium Dim 28 Avr 2024 - 15:01

petit up. I love you
d-elirium

d-elirium
*

Messages : 48
Inscrit(e) le : 14/07/2022

https://test-delirium-mv.forumactif.com/
d-elirium a été remercié(e) par l'auteur de ce sujet.

Résolu Re: pseudo-class a:active qui ne fonctionne pas.

Message par Toryudo Lun 29 Avr 2024 - 18:00

Bonjour !

Alors effectivement, on ne peut pas utiliser :active dans ce cas, parce que :active désigne l'action du clic qui reste enfoncé. De plus, les "actions CSS" ne se transmettent pas d'une page à l'autre, alors rien en CSS ne permet de faire cela. Par contre, en utilisant un script JavaScript, on peut tenter quelque chose.

Ça va être très sommaire, et ce ne sera sans doute pas le résultat idéal, mais en fonction de l'url, on peut changer le CSS (ou ajouter une class à laquelle est associé un CSS) d'un lien.

Par exemple :
- si je suis sur l'url https://test-delirium-mv.forumactif.com/memberlist alors dans la barre du menu, je peux ajouter une class au bouton qui a pour url cible /memberlist (ce qui correspond chez vous au bouton "Citadins")
- si je suis sur l'url https://test-delirium-mv.forumactif.com/login alors dans la barre du menu, je peux ajouter une class au bouton qui a pour url cible cible /login (ce qui correspond au bouton "Connexion")

Si je généralise ce fonctionnement, ça donne un code comme ceci (à placer "sur toutes les pages") :
Code:
$(function(){
  $('a.mainmenu[href="' + window.location.pathname + '"]').addClass('selected');
});

Ne reste plus qu'à ajouter un CSS à la class "a.mainmenu.selected", le même CSS que vous avez pour :hover :
Code:
a.mainmenu.selected {
  text-transform: uppercase;
  color: #fff;
  font: 8px var(--family4);
  letter-spacing: 1px;
  color: #afa891;
}

C'est assez limité, mais peut-être que ça vous conviendra ?
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1459
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: pseudo-class a:active qui ne fonctionne pas.

Message par d-elirium Mar 30 Avr 2024 - 10:16

Bonjour, je viens de tester et c'est parfait! Vraiment, merci beaucoup, c'est le résultat que j'espérais obtenir. J'aimerais être aussi calée avec JavaScript, c'est impressionnant tous les résultats qu'on peut obtenir avec. Alors encore merci, grâce à vous les petits détails de mon forum prennent formes comme je l'imaginais. I love you

En vous souhaitant une agréable journée. pseudo-class a:active qui ne fonctionne pas. 1f31f
d-elirium

d-elirium
*

Messages : 48
Inscrit(e) le : 14/07/2022

https://test-delirium-mv.forumactif.com/
d-elirium 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