changement de couleur de fond quand on a cliquer sur un lien

[kinouplay]

Au secours, je butte sur un truc qui doit-être simple à faire

J'ai crée 3 rectangles avec un fond blanc en css, dans lesquels j'ai saisie du texte et mis des liens sur chaque texte (liens qui renvoient sur des articles) en html.

Ce que j'aimerai faire, c'est que quand on a cliqué sur un lien (qui a renvoyé sur la page concernée), le fond du rectangle change de couleur (par exemple gris) pour indiquer que le lien est visité.

Quelqu'un pourrait me dire comment faire ça, ce serait sympa, merci par avance pour votre aide.

Je vous joins un dessin (qui sera peut-être plus simple à comprendre que mon texte)

[lomart]

Bonsoir,

Il faut utiliser la pseudo-classe visited

a:visited{background:grey}

Ne connaissant pas le CSS actuel, difficile d'être plus précis

[kinouplay]

Bonjour Lomart,

sympa de se retrouver pour une nouvelle discussion.

Voici mon code css :

.containerptbloque{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

.ptbloque{
opacity: 1;
cursor: pointer;
background-color: #FFF;
border: 0.2px solid #c0643f;
border-radius: 8px;
margin: 6px;
padding: 13px;
text-align: center;
text-transform: uppercase;
line-height: 1.2;/*interligne entre le texte*/
width: 140px;
height: 140px;
}

Mon code html :

<div class="containerptbloque">
<div class="ptbloque"><a href="index.php?option=com_content&amp;view=articl e&amp;id=152:article-lien-1-visite&amp;catid=2:uncategorised"><span style="font-size: 10pt; color: #3f494c;"><strong>LIEN 1<br /></strong></span></a></div>
<div class="ptbloque"><a href="index.php?option=com_content&amp;view=articl e&amp;id=153:article-lien-2-visite&amp;catid=2:uncategorised"><span style="font-size: 10pt; color: #3f494c;"><strong>LIEN 2<br /></strong></span></a></div>
</div>

[lomart]

Dans ce cas, ce code devrait faire l'affaire

.ptbloque > a:visited{background:grey}

Par contre, il faudrait mettre .ptbloque > a au lieu de .ptbloque pour mettre les margin/padding au bloc lien
On peut aussi affecter la classe à la balise a
Dans les 2 cas, il faudra sans doute donner un display:inline-block

[kinouplay]

Désolé, j'ai pas compris ce qu'il fallait faire ?.
Pourriez-vous mettre les classes dans les codes que je vous ai fourni, pour voir ce qu'il faut faire ?
le &gt que vous avez mis dans votre code, c'est quoi ?
Merci par avance.

[lomart]

Il faut simplement ajouter le code fourni
le &gt est une conversion automatique du forum. Il fallait lire > pour 'enfant de'

[kinouplay]

Bonjour, merci pour l'explication.
J'ai mis le code que vous m'avez fourni dans le css, mais aucun changement (le bloque ne devient pas gris quand on clic dessus et qu'on arrive sur l'article à lire).

[lomart]

Il faut modifier le code comme ceci. J'ai ajouté la classe directement au lien. Testé chez moi, ça fonctionne

.containerptbloque{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.ptbloque{ opacity: 1; cursor: pointer; background-color: #FFF; border: 0.2px solid #c0643f; border-radius: 8px; margin: 6px; padding: 13px; text-align: center; text-transform: uppercase; line-height: 1.2;/*interligne entre le texte*/ width: 140px; height: 140px; }
.ptbloque:visited{background:grey}

<div class="containerptbloque">
   <a class="ptbloque" href="index.php?option=com_content&amp;view=articl e&amp;id=152:article-lien-1-visite&amp;catid=2:uncategorised"><span style="font-size: 10pt; color: #3f494c;">
     <strong>LIEN 1<br /></strong></span>
  </a>
   <a class="ptbloque" href="index.php?option=com_content&amp;view=articl e&amp;id=153:article-lien-2-visite&amp;catid=2:uncategorised"><span style="font-size: 10pt; color: #3f494c;">
      <strong>LIEN 2<br /></strong></span>
   </a>
</div>

[kinouplay]

Merci, j'ai recopié le code, effectivement maintenant quand on clic sur un lien, le fond devient gris, par contre quand on clique sur le second lien, les deux reste gris. Ce qui serait mieux, c'est quand on clique sur le second lien, le premier lien redevienne comme avant, pour laisser en gris que le lien actif, es-ce qu'il est possible de faire ceci ?

[lomart]

La demande était :

Ce que j'aimerai faire, c'est que quand on a cliqué sur un lien (qui a renvoyé sur la page concernée), le fond du rectangle change de couleur (par exemple gris) pour indiquer que le lien est visité.

Il n'est pas possible en CSS pur de cibler uniquement pour le dernier lien visité. Ce qui me semble logique, puisque que c'est pour aider le visiteur à identifier les pages qu'il a vues.

[kinouplay]

ah mince, du coup ça m'arrange pas. Es-ce qu'il y a un autre moyen de faire ceci ?

[lomart]

ah mince, du coup ça m'arrange pas. Es-ce qu'il y a un autre moyen de faire ceci ?

Non, je ne pense pas. L'information n'existe pas. Il faudrait la créer.
De plus, comme je le disais, pour moi, cela n'a aucun sens. Quel serait l'avantage pour le visiteur ?

[kinouplay]

de savoir dans quelle catégorie il se trouve quand il lie un ou des articles.

[lesoutier]

En fait ce que tu cherches ressemble plutôt à un système d'onglets (tabs en anglais).
Jette un coup d'oeil à cette section du JED https://extensions.joomla.org/tags/articles-tabs/

[kinouplay]

Ah oui, très bonne idée, j'avais pas pensé à ça, ce qui va résoudre mon problème. Merci.