[Résolu] Etat "a: active" ne fonctionne pas

Bonjour,

La question remonte peut être à l'origine de la création web mais ma configuration technique (et mon niveau de développeur...) sont peut-être à l'origine de mon pb.

Je souhaite donc créer un menu supplémentaire, indépendant du menu principal, à trois onglets (ou rubriques) et je souhaite afficher une couleur différente quand la page est consultée soi l'état a:focus a priori.
- sur Safari : aucun effet
- sur Chrome : l'effet fonctionne comme si l'état était a:active et non pas a:focus

Tous les états fonctionnent sur les onglets (a, a:hover) sauf a:focus

Pour info, je suis sur Wordpress avec.. Visual composer. Cela dit, il n'y a pas de raison pour que ça ne fonctionne pas.
Modifié par goudurisc (23 Feb 2018 - 14:53)

Bonjour,

Pourrait on avoir le code pour voir ?

Salut,

goudurisc a écrit :
je souhaite afficher une couleur différente quand la page est consultée soi l'état a:focus a priori.

Loupé.

Active c'est quand on clique dessus (comme un bouton qui s'enfonce).
Focus c'est quand ton élément a le focus (les pointillés autour du champ, comme quand t'es dans un input ).
Visited c'est un lien déjà visité.

a écrit :
:active a:active Selects the active link
[...]
:focus input:focus Selects the <input> element that has focus
[...]
:visited a:visited Selects all visited links

https://www.w3schools.com/css/css_pseudo_classes.asp

Je fais au plus simple puisque l'idée est d'afficher le fond différend (#FF0000) sur les pages actives

<ul id="mon-menu">
  <li><a href="page-1.html">Rubrique 1</a> </li>
  <li><a href="page-2.html">Rubrique 2</a></li>
  <li><a href="page-3.html">Rubrique 3</a></li>
</ul>

#mon-menu {
	position: relative;
	display: inline-block;
}
#mon-menu li {
	position: relative;
	display: inline;
}
#mon-menu li a {
	background-color: #00CC00;
}
#mon-menu li a:hover {
	background-color: #33CCFF;
}
#mon-menu li a:focus {
	background-color: #FF0000;
}

Tu veux dire que quand on est sur "page-2.html" tu veux que ton lien vers "page-2.html" ait un fond différent ?

Je sais pas si tu a lu et compris ce que j'ai écris mais :focus ne fais pas sur tout ça hein ! Il te faut un peu de PHP pour le faire. Après avec tes outils je sais pas trop, mais c'est certainement pas :focus !
Modifié par _laurent (23 Feb 2018 - 22:03)

Merci Laurent

Bonjour goudurisc,

Je me permet de compléter même s'il est résolu pour te donner une autre piste qui consiste à utiliser le sélecteur d'attribut [nom-attribut=valeur] au lieu de créer des classes, peut être que cela peut t'arranger qui sait....

a[href=page-1.html]{
	background-color: #FF0033!important;
}
a[href=page-2.html]{
	background-color: #FF0033!important;
}
a[href=page-3.html]{ 
	background-color: #FF0033!important;
}

J'ai pas trop compris le résultat et la demande initiale, mais bon c'est pas trop grave, l'essentiel c'est que tu arrives à ce que tu voulais

Merci aliasdmc, ce complément d'info m'est très utile puisque je ne connaissais pas la mécanique du sélecteur d'attributs, même si je l'avais vu passer lors du parcours du CSS de mes thèmes. Comme je viens de le comprendre, je le retiens précieusement et je ne doute pas qu'il me servira ultérieurement !!!

Mais en l'état, il s'agit de gérer une navigation supplémentaire, au-delà de la nav principale, et qui plus est, dans une mise en page "Visual Composer" (plugin Premium de mise en page wordpress)...

Bref, ta solution impacterait la totalité des sélecteurs de la page, si j'ai bien compris (ce qui n'est pas garantit), et ce n'est pas ce que je souhaite puisque les effets doivent se limiter exclusivement à ma petite nav à trois boutons.

Merci d'avoir enrichi un post qui était signalé comme résolu, ça témoigne d'une réelle volonté de donner un coup de main et j'apprécie !!!!!!!!!