recherche

Maison  >  Questions et réponses  >  le corps du texte

Pourquoi le survol ne fonctionne-t-il pas et les styles n'apparaissent-ils pas ?

<p>Je conçois une barre de navigation, mais mon survol ne fonctionne pas. Lorsque je survole l'élément "man" dans mon menu déroulant, son style de survol ne fonctionne pas et le style n'est pas affiché dans l'inspecteur.有什么问题吗?这是我的HTML代码:</p> <p><br /></p> <pre class="brush:css;toolbar:false;">/* Conteneur de barre de navigation */ corps { marge : 0 ; remplissage : 0 ; dimensionnement de la boîte : bordure-boîte ; } li { décoration de texte : aucune ; } .nav-conteneur { direction : rtl; alignement du texte : à droite } .barre de navigation { débordement caché; couleur d'arrière-plan : #333 ; famille de polices : Arial ; } /* Liens dans la barre de navigation */ .navbar un { Flotter à droite; taille de police : 16 px ; Couleur blanche; alignement du texte : centre ; remplissage : 14px 16px ; décoration de texte : aucune ; } /* Le conteneur déroulant */ .dérouler { Flotter à droite; débordement caché; } /* Bouton déroulant */ .dropdown .dropbtn { taille de police : 16 px ; bordure : aucune ; contour : aucun ; Couleur blanche; remplissage : 14px 16px ; couleur d'arrière-plan : hériter ; police : hériter ; /* Important pour l'alignement vertical sur les téléphones mobiles */ marge : 0 ; /* Important pour l'alignement vertical sur les téléphones mobiles */ } /* Contenu déroulant (masqué par défaut) */ .dropdown-contenu { affichage : aucun ; position : absolue ; couleur d'arrière-plan : #f9f9f9 ; largeur : 100 % ; gauche : 0 ; box-shadow : 0px 8px 16px 0px rgba(0, 0, 0, 0.2); indice z : 1 ; } .dropdown : survolez .dropdown-content { bloc de visualisation; } .megamenu-conteneur { couleur de fond : aqua ; largeur : 100 % ; } .megmenu { largeur : 100 % ; } .megamenu-titre { largeur : 20 % ; couleur de fond : bleu ; affichage : bloc en ligne ; remplissage : 5px 15px ; alignement vertical : haut ; } .megamenu-subitems-default { largeur : 70 % ; couleur de fond : bleu-violet ; affichage : bloc en ligne ; remplissage : 15 px ; } .megamenu-item { float : non défini !important ; remplissage : 0 !important; } .man: survolez .megamenu-subitems-default { visibilité : cachée ; } #sous-éléments { affichage : bloc en ligne ; visibilité : cachée ; couleur de fond : jaune-vert ; largeur : 70 % ; } .man: survolez #subitems { visibilité : visible ; } .test { Couleur jaune; } .man: survolez .test { couleur : blé ; }≪/pré> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="fr"> <tête> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./megamenu.css"> <titre>Document</titre> ≪/tête> <corps> <div class="nav-container"> <div class="navbar"> <a href="#home">Accueil</a> <a href="#news">Actualités</a> <div class="dropdown"> <button class="dropbtn"> Liste déroulante <i class="fa fa-caret-down"></i> </bouton> <div class="dropdown-content"> <div class="megamenu-container"> <div class="megmenu"> <div class="megamenu-title"> <ul> ≪li > <div class="man"> <a class="megamenu-item" href="#">man</a> </div> ≪/li> <li id="femme"> <a class="megamenu-item" href="#">femme</a> ≪/li> <li id="enfant"> <a class="megamenu-item" href="#">kid</a> ≪/li> </ul> </div> <div class="megamenu-subitems-default"> <p>bonjour-par défaut</p> </div> <div class="megamenu-subitems-test" id="subitems"> <p>bonjour-1</p> </div> <div class="megamenu-subitems"> <p>bonjour-2</p> </div> <div class="megamenu-subitems"> <p>bonjour-3</p> </div> <div class="megamenu-subitems"> <p>bonjour-4</p> </div> </div> </div> <p class="test">test</p> </div> </div> </div> </div> </corps> </html></pre> <p><br /></p>
P粉842215006P粉842215006530 Il y a quelques jours553

répondre à tous(1)je répondrai

  • P粉226413256

    P粉2264132562023-08-03 18:28:06

    Dans votre fichier CSS vous avez cette règle : 

    .man:hover #subitems {
 visibility: visible;    
}

    Cependant, #subitems n'est pas un descendant de .man. Vous devez placer #subitems au même niveau que .man, ou en tant que descendant de celui-ci.

    Cette règle CSS spécifie qu'un élément avec l'identifiant #subitems deviendra visible lorsque .hover est sur l'un de ses ancêtres avec la classe .man cependant, dans votre HTML, .man est un sous-élément avec un seul Le div de l'élément .megamenu- article.

    Pour masquer le div enfant par défaut, essayez de remplacer ce sélecteur : 

    .man:hover .megamenu-subitems-default{
    visibility: hidden;
}

    avec :

    .megamenu-title:hover ~ .megamenu-subitems-default{
    visibility: hidden;
}

    Pour les sous-éléments de chaque élément de menu, je vous recommande soit de donner à chaque sous-élément div un identifiant unique et de contrôler leur visibilité à l'aide de JavaScript, soit de modifier votre mise en page afin que le div .megamenu-subitems soit sur la même page que les niveaux d'élément li, et utilisez des sélecteurs frères ou sœurs ou faites-en des descendants d'éléments li.


    répondre
    0
  • Annulerrépondre