Blog iamvdo.meElle permet de cibler un élément qui est la cible d’un lien : une ancre.
Qu’est ce qu’une ancre HTML ?
Une ancre est un lien classique, mais dans la même page de type :
<a href="#cible">Allez à la cible</a>
...
<div id="cible">...</div>Lors du clic sur ce lien, l’élément ciblé (ici #cible) est affiché à l’écran, même si celui-ci se trouve plus bas ou plus haut dans la page. Un scroll est donc provoqué.
La pseudo-classe :target permet donc d’appliquer un style à l’élément qui reçoit le lien, donc l’élément qui a l’attribut id="cible".
Mettre en surbrillance
Par exemple, il est possible de mettre une couleur d’arrière-plan différente sur un bloc de texte qui vient de recevoir le lien.
#cible:target{
background: lightgray;
}Lors du clic sur le lien, les styles sont appliqués. Attention, l’historique de navigation s’en trouve modifié...A utiliser à bon escient !
#1par shalk, le 31 octobre 2012
Impeccable, merci !
C’est la petit info qui me manquait pour réaliser mon menu déroulant en CSS3 :)
j’aurais dû y penser plus tôt :p
#2par Newfile01, le 7 mai 2013
Bonjour,
Tout d’abord je dois vous dire que je suis en admirations devant vos créations "*.*" et j’ai un problème à résoudre sur lequel je me suis penché durant beaucoup de temps.
J’aimerai pouvoir en cliquant sur une miniature (image) afficher la grande image dans la même page avec un fond (noir ou bien un peu transparent) recouvrant le reste de la page (donc l’image doit être au-dessus des autres) et lorsque je reclique dans le noir la grande image disparaît et la miniature revient.
Pour faire simple à la manière de la galerie Facebook sauf que le point de départ est ma miniature bien que je crois qu’il y a aussi cela sur Facebook.
J’ai essayé avec des
ul
li
ul class="niveau2>
li .... /li
/ul
li
/ul
(désolé pour la présentation les espace sont enlevés automatiquement . Il s’agit de listes imbriquées si vous connaissez )
En faisant apparaître un bloc "overflow:hidden" mais cela ne marche qu’avec le "hover"...
Voilà merci de votre aide si vous avez une réponse.
Bonne continuation