18041 sujets

Questions générales et questions de débutants

[Résolu] Élément :focus

Bonjour à tous et a toutes. Smiley biggrin

Je voulais vous poser une question par rapport à l'événement " :focus ".
J' essayais de créer une sorte de menu déroulant qui fonctionne avec l'événement " :focus " un peux dans le même style que ceux créée en JS avec l'événement " onClick ".

Exemple : http://www.w3schools.com/howto/howto_js_dropdown.asp

Donc j'en viens à ce que j'ai essayer de faire qui ne fonctionne pas..
Lien de mon test : http://codepen.io/Golderen/pen/gLwGMb

En suivant la " logique ", j'ai créer des listes et des sous listes.
Comme pour le fonctionnement d'un simple " Menu déroulant " je cache les sous listes et normalement au " survol ( si :hover ) " de l'élément la sous liste se dévoile..

En suivant ce principe je pourrais faire de même en utilisant " :focus " ?
Mais justement cela ne fonctionne pas. Pourquoi ?
Sachant que si dans mon CodePen je change " :focus " par " :hover ", ça fonctionne.. ^^"

Est ce que focus est particulier ? Ou est ce que ce type de menu déroulant ne peut être créée que en JS ?

Merci de vos réponses Smiley smile
Bonne journée ! Smiley smile
Modifié par Golderen (16 Nov 2016 - 11:41)
Modérateur
Salut Golderen,

Si si ca fonctionne avec :focus mais il y a un petit détail que t'as zappé qui marche avec :hover mais pas avec :focus :
nav ul li a:focus{
	border-bottom: 6px solid #999;
}
nav ul li:focus .hidden{
  opacity: 1;
}

donc c'est le :focus sur <a> qui change l'aspect de ton menu mais le code qui fait apparaître le menu le fait au :focus du <li> or le :focus ne porte que sur 1 élément donc au :focus du <a> tu ne peux pas avoir le :focus du <li> en même temps (contrairement au :hover)

Du coup il te faut un truc du genre :

nav ul li a:focus{
	border-bottom: 6px solid #999;
}
nav ul li a:focus + .hidden{
  opacity: 1;
}


bisous Smiley smile
Modifié par _laurent (16 Nov 2016 - 11:49)
Merci de t'as réponse _Laurent !

Effectivement cela fonctionne mieux comme sa ^^"

Donc c'est juste l'ajout de l'attribut " + " qui change la donne ?
J'avais justement fait comme tu le montre dans ton exemple :

nav ul li a:focus .hidden{
  opacity: 1;
}


Mais sa n'avait pas pris effet Smiley lol
Modérateur
Je ne sais pas si il "change la donne" en tout cas il change complètement le sens du sélecteur.
Le "+" c'est un sélecteur d'adjacence direct. Dans ton cas le sélecteur :
nav ul li a:focus .hidden {}

signifie : l'élément ayant la classe .hidden fils d'un élément <a> ayant le focus lui même fils d'un élément <li> lui même fils d'un élément <ul> lui même fils d'un élément <nav>

Or ton .hidden est le frère du <a>, pas son fils. Je pense que c'est pour ca que du coup tu as changé le code du :hover pour le mettre sur le <li> (son parent).

Alors que le code
nav ul li a:focus + .hidden {}

signifie : l'élément ayant la classe .hidden FRÈRE DIRECT d'un élément <a> ayant le focus lui même fils d'un élément <li> lui même fils d'un élément <ul> lui même fils d'un élément <nav>
Modifié par _laurent (16 Nov 2016 - 14:45)
Sujet clos
Aller à