jQuery Girl
  1. jQuery Girl
  3. Menu de survol CSS: obtenir un élément de menu survolé pour conserver l’état CSS survolé
Intereting Posts
Tri naturel rapide pour les fichiers XML volumineux dans le navigateur? Conversion d’un tableau HTML en fichier Excel en JavaScript pur à l’aide du plug-in sheets.js Comment obtenir un fond dégradé vertical pour fonctionner dans tous les navigateurs? Supprimer les objects en double Numéros de barres de défilement jQuery: positionnement des numéros plug-in de validation jQuery – événement de focus incohérent sur les événements de clé / souris jQuery: Obtenir la position du curseur du texte en entrée sans code spécifique du navigateur? Comment puis-je exécuter un javascript après le chargement d’Ajax? Comment réinitialiser les valeurs de la zone de sélection dans Jquery sumoselect Multi Select plugin jQuery Arrête de faire défiler le dernier élément Problème lors du chargement des options de sélection Bootstrap via Ajax Post Comment appeler une fonction jQuery externe en mode angular Boîte de dialog qui apparaît une fois par visite Tableaux multidimensionnels JQuery Atsortingbue l’atsortingbut à une fonction, mais ne l’exécute pas

Menu de survol CSS: obtenir un élément de menu survolé pour conserver l’état CSS survolé

entrez la description de l'image ici

entrez la description de l'image ici

Dans cette situation, comment pourrais-je obtenir le réglage permettant de conserver l’état survolé pendant le lancement des éléments de menu? Existe-t-il un moyen uniquement CSS ou devrais-je introduire du javascript? Merci.

C’est possible avec juste css.

Par exemple: Si votre menu est composé de listes nestedes: 

li:hover { background: #color; } li:hover ul { display: block; } li:hover ul li {}

Fiddle: http://jsfiddle.net/maniator/ZC4xv/

CSS de l’exemple ci-dessus: 

 #nav-menu > li { background: orange; float: left; padding: 10px; border: 1px solid grey; } #nav-menu > li:hover a { background: red; padding: 2px; display: inline; } #nav-menu > li ul { display: none; position: absolute; } #nav-menu > li:hover ul { display: block; margin-left: 5px; } #nav-menu > li:hover ul li { background: blue; } #nav-menu > li:hover ul li:hover { background: green; }

En supposant que le sous-menu soit une liste nestede, vous pouvez utiliser jQuery pour append une classe de survol à l’élément de menu parent: 

 
     
  • Menu Item 1 
       
    • Sub-Menu Item 1
      •  
    • Sub-Menu Item 2
      •  
     
    •  
  • Menu Item 2
    •

Essayez avec un élément de niveau supérieur dans une balise span. En supposant: 

 
  •  Setting 
       ... 
     
    •

    Alors ceci est pour CSS: 

     li:hover span { background: #color; display: block; } li:hover ul { display: block; }