Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mettre le :hover sur <li> ou <a>


Sujet :

Survol d'un élément en CSS (:hover)

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2017
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2017
    Messages : 25
    Points : 11
    Points
    11
    Par défaut Mettre le :hover sur <li> ou <a>
    Bonjour,

    Question de vrai débutant.
    Nom : li ou a.png
Affichages : 77
Taille : 149,6 Ko

    lorsqu'on veut cibler un élément de sous-menu, faut faire un "li:hover" ou un "a:hover" ?
    Dans mon cas il s'agit de mettre l'élément en couleur plus foncé lorsque je passe dessus avec la souris. J'ai remarqué que cela fonctionne dans les deux cas.

    Question du même genre, si je souhaite ajouter du padding à mon élément de sous- menu, est il préférable de le faire sur le "li" ou le "a" ?

    Si c'est possible d'avoir un ptit resumé de ce qu'on à le droit de faire avec chacun des deux...

    D'avance merci.

  2. #2
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    ton css n'est pas bon, il doit y avoir avant tout un display block dans cette hitoire, ensuite pour la question entre le LI ou le A, lequel des 2 est en avant plan ?
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2017
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2017
    Messages : 25
    Points : 11
    Points
    11
    Par défaut
    Bonjour,

    je confirme, les <a> sont mis en inline-block dans le css.
    ensuite qui est au premier plan ? je ne sais pas dire.

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    <!DOCTYPE>
    <html>
        <head>
            <title>menu avec float</title>
            <meta http-equiv="content-type" content="texte/html; chartset=UTF-8">
            <meta chartset="UTF-8">
            <link rel="stylesheet" type="text/css" href="#">
            <meta name="author" content="moi">
            <style>
                body {
                    font-family: 'source code pro', Calibri, serif;
                    margin: 0px;
                    padding: 0px;
                }
                nav {
                    width: 100%;
                    background-color: darkgrey;
                }
                nav> ul {
                    padding: 0px;
                    margin: 0px; 
                }
                nav ul:after {
                    content:"";
                    display: block;
                    clear: both;
                }
               nav> ul> li {
                    float: left;
                    position: relative;
                    text-align: center;
                }
                nav > ul > li > a {
                    padding: 20px 30px;
                    color: azure;
                }
                nav > ul> li:hover > a {
                    padding: 15px 30px 20px 30px;
                }
                nav li {
                    list-style-type: none;
                }
                nav a {
                    display:inline-block;
                    text-decoration: none;
                }
                .sousmenu {
                    display: none;
                }
                nav li:hover .sousmenu {
                    display: inline-block;
                    position: absolute;
                    top: 100%;
                    left:0%;
                    padding:0px;
                    z-index: 1O;
                }
                .sousmenu li{
                    border-bottom: 1px solid #CCC;
                } 
                .sousmenu a {
                    padding: 15px 50px;
                    color: black;
                    width: 50px;
                    font-size: 13px;
                }
         
                .home:hover {
                    border-top: 5px solid yellow;
                    background-color: RGBa(243, 221, 27, 0.5);
                }
                .news:hover {
                    border-top: 5px solid blue;
                    background-color: RGBa(27, 124, 243, 0.15);
                }
                .contact:hover {
                    border-top: 5px solid RGBa(34, 245, 83, 1);
                    background-color: RGBa(124, 253, 154, 0.15);
                }
                .about:hover {
                    border-top: 5px solid RGBa(243, 203, 134, 1);
                    background-color: RGBa(247, 226, 190, 0.15);
                }
                .home .sousmenu {
                    background-color: RGBa(243, 221, 27, 0.5);
                }
                .news .sousmenu {
                    background-color: RGBa(117, 174, 244, 1);
                }
                .contact .sousmenu {
                    background-color: RGBa(153, 244, 148, 1);
                }
                .about .sousmenu {
                    background-color: RGBa(249, 207, 71, 1);
                }
                .home .sousmenu li:hover {
                  background-color: yellow; 
                  color: #CBCBCC;
                }
                .news .sousmenu a:hover {
                  background-color: blue;
                  color: aliceblue;
                }
                .contact .sousmenu a:hover {
                  background-color: RGBa(34, 245, 83, 1); 
                  color: aliceblue;
                }
                
            </style>
        </head>
        <body>
            <nav>
            <ul class="fond">
                <li class="home"><a href="#">Home</a>
                    <ul class="sousmenu">
                        <li><a href="#">Home1</a></li>
                        <li><a href="#">Home2</a></li>
                        <li><a href="#">Home3</a></li>
                    </ul>
                </li>
                <li class="news"><a href="#">News</a>
                    <ul class="sousmenu">
                        <li><a href="#">News1</a></li>
                        <li><a href="#">News2</a></li>
                        <li><a href="#">News3</a></li>
                    </ul>
                </li>          
                <li class="contact"><a href="#">Contact</a>
                   <ul class="sousmenu">
                        <li><a href="#">Contact1</a></li>
                        <li><a href="#">Contact2</a></li>
                        <li><a href="#">Contact3</a></li>
                    </ul>  
                </li>
                <li class="about"><a href="#">About</a></li>
            </ul>
            </nav>
        </body>
    </html>

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 945
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 945
    Points : 34 239
    Points
    34 239
    Par défaut
    Bonjour,
    Citation Envoyé par haddocks
    lorsqu'on veut cibler un élément de sous-menu, faut faire un "li:hover" ou un "a:hover" ?
    Cela peut dépendre de ce que tu veux faire comme modification de style.
    • Si les modifications portent uniquement sur l'élément <a> alors je dirais qu'il préférable d'utiliser directement a:hover.
    • Si les modifications portent sur les éléments <li> et <a> alors je traiterais plutôt cela sur le li:hover.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    nav li:hover {
      background: #CAB;
    }
    nav li:hover a{
      background: #BCA;
    }
    même si dans l'absolu tu peux faire les deux séparément, c'est l'effet cascade recherché qui compte.

    Côté performance cela ne devrait pas réellement jouer.

    Citation Envoyé par haddocks
    si je souhaite ajouter du padding à mon élément de sous- menu, est il préférable de le faire sur le "li" ou le "a" ?
    Le padding c'est l'espace intérieur qui repousse le contenu d'un élément des bords pour aérer, je dirais qu'il est préférable de le mettre sur tes <a> en mettant tes éléments en display:block pour qu'il utilisent tout l'espace du conteneur.

    Citation Envoyé par psychadelic
    ensuite pour la question entre le LI ou le A, lequel des 2 est en avant plan ?
    Je ne comprend pas le sens de cette interrogation !!

    Si l'élément <a> couvre entièrement son parent <li> celui-ci prendra l'événement avant le parent, il est au sommet de l'arbre, l'événement se propagera ensuite si un event.stopPropagation() n'intervient pas.

  5. #5
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    ensuite pour la question entre le LI ou le A, lequel des 2 est en avant plan ?
    Citation Envoyé par NoSmoking Voir le message
    Je ne comprend pas le sens de cette interrogation !!Si l'élément <a> couvre entièrement son parent <li> celui-ci prendra l'événement avant le parent, il est au sommet de l'arbre, l'événement se propagera ensuite si un event.stopPropagation() n'intervient pas.
    tout dépend du ou des valeurs de z-index(css) éventuellement présent sur ces éléments
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 032
    Points : 32 836
    Points
    32 836
    Par défaut
    Bonjour,

    Citation Envoyé par psychadelic Voir le message
    tout dépend du ou des valeurs de z-index(css)...
    C'est cela oui....
    Et si ma tante en avait, on l'appellerait mon oncle...

    Là, psychadelic, ça sent la mauvaise foi à plein nez !


    @haddocks
    En fait, c'est simple à tester :
    • mets une couleur de background différente sur le <li> et le <a>.

    • Si tu mets le padding sur le <li>, ce padding sera EN DEHORS de la zone cliquable (lien <a>)
    • Si tu mets le padding sur le <a>*, ce padding sera EN DEDANS de la zone cliquable, qui sera donc plus grande

    *La balise <a> est par défaut "inline" (comme la balise <span>).
    Pour que le padding prenne effet, il faut indiquer display:block; ou display:inline-block;.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    C'est cela oui....
    Et si ma tante en avait, on l'appellerait mon oncle...

    Là, psychadelic, ça sent la mauvaise foi à plein nez !
    Aucune mauvaise foi de ma part, cela fait simplement partie de ma manière de penser (et que certains jugent comme un handicap ; on a déjà échangé en MP sur ce sujet).
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  8. #8
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2017
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juin 2017
    Messages : 25
    Points : 11
    Points
    11
    Par défaut
    Bonjour,

    "mets une couleur de background différente sur le <li> et le <a>.

    Si tu mets le padding sur le <li>, ce padding sera EN DEHORS de la zone cliquable (lien <a>)
    Si tu mets le padding sur le <a>*, ce padding sera EN DEDANS de la zone cliquable, qui sera donc plus grande."


    A ça j'ajouterais, mais corrigez moi si je me trompe, que le padding de <a> étire le "outer" de <li>.

    Voir ci-dessous, J'ai fait une petite expérience. On voit en 1 que les padding s'ajoutes. En 2 il y a du padding uniquement sur <li>.
    En 3 malgré le manque de padding sur <li>, on à le sentiment que les <li> prennent la taille des <a>.
    Nom : padding sans hover.png
Affichages : 42
Taille : 21,7 Ko
    C'est là que je me dit "oui mais peut-être que les <li> sont plus petit et caché derrière".
    j'attends avec impatience votre avis

    Du coup, pour répondre aux questions que je me posais au départ sans tenir compte des :hover :
    lorsqu'on veut cibler un élément de sous-menu, faut faire un "li:hover" ou un "a:hover" ?
    si je souhaite ajouter du padding à mon élément de sous- menu, est il préférable de le faire sur le "li" ou le "a" ?

    J'aurais tendance à dire que si <a> doit faire la même taille que <li> et avoir des couleurs identiques, alors autant se servir de <a> pour entrer les attributs, parceque sinon les padding vont s'ajouter.

    Maintenant en tenant compte des :hover, voir ci-dessous, les comportements 1, 2 et 3 sont identiques mais ciblés sur l'onglet survolé.
    Nom : avec hover.png
Affichages : 41
Taille : 34,8 Ko

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 032
    Points : 32 836
    Points
    32 836
    Par défaut
    Bonjour,

    Citation Envoyé par haddocks Voir le message
    ...C'est là que je me dit "oui mais peut-être que les <li> sont plus petit et caché derrière"...
    LOL...
    Il faut voir les éléments en display block ou inline-block comme des BOITES, qui s'imbriquent ou se juxtaposent.

    ...lorsqu'on veut cibler un élément de sous-menu, faut faire un "li:hover" ou un "a:hover" ?...
    NoSmoking a déjà répondu.

    Et comme je l'ai dit, c'est la zone cliquable qui a ici de l'importance.

    • Dans ton cas n°2 (padding sur le <li> seul) : quand le curseur arrive sur le <li>, la couleur de fond va changer *... MAIS un clic ne donnera rien (puisqu'on ne sera pas sur le <a>)
      *Normalement, le changement de couleur devrait indiquer qu'on peut cliquer : ce n'est pas le cas.
      C'est destabilisant pour l'utilisateur, et donc A EVITER.
    • Dans ton cas n°3 (padding sur le <a> seul) -> le <a> REMPLIT ENTIEREMENT le <li> : quand le curseur arrive sur le <li>, on est AUSSI sur le <a> ; on peut cliquer !
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 945
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 945
    Points : 34 239
    Points
    34 239
    Par défaut
    Citation Envoyé par psychadelic
    tout dépend du ou des valeurs de z-index(css) éventuellement présent sur ces éléments
    Il me semble comprendre ce que tu veux dire mais tu pourras toujours mettre un enfant <a> sous son parent <li> mais jamais mettre un parent au dessus d'un de ses enfants, j’admets que la nuance est subtile.

    Dans le cadre d'un menu je vois aucune raison pour qu'un élément <a> ne soit pas cliquable !

  11. #11
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    J'ai trouvé un autre cas ou le :hover sur les <a... ></a> ne peut pas se produire, et sans utiliser de z-index!

    ce qui pose tout de même problème pour activer le lien si on ne clique pas sur le texte

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    ul { list-style-type: none; }
    li {
      background-color: aquamarine;
      display: block;
      padding: .3em .6em;
      width: 10em;
      margin: .1em 0;
      }
    a {
      display: block;
      width: 0px;
      text-transform: capitalize;
      text-decoration: none;
      text-overflow: unset;
      white-space: nowrap;
      }
     
    li:hover { background-color: darkorchid; }
     
    a:hover {  background-color:orange;  }  /* ne se presentera jamais */

    le HTML pour test:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <ul>
      <li><a href="#aaa">aaa xxx</a></li>
      <li><a href="#bbb">bbb xxx</a></li>
      <li><a href="#ccc">ccc xxx</a></li>
      <li><a href="#ddd">ddd xxx</a></li>
    </ul>

    Et la, je veux bien admettre que c'est franchement capillotracté
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 945
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 945
    Points : 34 239
    Points
    34 239
    Par défaut
    Citation Envoyé par psychadelic
    J'ai trouvé un autre cas ou le :hover sur les <a... ></a> et sans utiliser de z-index!
    encore plus radical c'est de mettre un pointer-events: none sur les <a>.

    Un remarque toutefois concernant le width:0, dans ce cas les textes avec espaces passent à la ligne sauf à ajouter un white-space: nowrap.

  13. #13
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Une remarque toutefois concernant le width:0, dans ce cas les textes avec espaces passent à la ligne sauf à ajouter un white-space: nowrap.
    exact: j'ai modifié le code .
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

Discussions similaires

  1. Mettre un hover sur une image
    Par iluvatar75 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 15/11/2011, 15h56
  2. mettre une JScrollBar sur un onglet
    Par thedd dans le forum Agents de placement/Fenêtres
    Réponses: 4
    Dernier message: 02/03/2004, 21h12
  3. [VB6] mettre une image sur un boutton
    Par dim dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 15/02/2004, 02h28
  4. Réponses: 2
    Dernier message: 19/08/2003, 16h45
  5. Ne jamais mettre le focus sur un tbutton, possible
    Par portu dans le forum Composants VCL
    Réponses: 4
    Dernier message: 03/07/2003, 16h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo