Dev Faq
0
votes

CSS) Pourquoi mon "Hover" ne fonctionne-t-il pas? J'ai cherché google mais je ne pouvais pas le réparer

i défini d'abord .submenu à affichage: aucun; . Et ensuite je définis .recpe: hover .submenu {affichage: bloc;} . Lorsque je survole sur le .recpe , je voulais faire .submenu Affichage: bloc; . Mais ça ne marche pas. Pouvez-vous me dire pourquoi ça ne marche pas? Je ne peux pas vraiment comprendre cela. Utilise JavaScript la seule façon dont je peux résoudre ce problème? Voici mon code. Merci xxx

1 commentaires

Aucun des éléments HTML n'a une recette classe.

8 Réponses :

1
votes

Je ne suis pas le meilleur avec cela, mais je dirais que cela pourrait avoir quelque chose à voir avec la sélection du .recpe: survoler code> puis la sélection de .submenu code> droite Après cela: 

    .recipe:hover .submenu{
        display: block;
    }

2 commentaires

Je sais que je devrais réviser quelque chose là-bas, mais je ne peux pas comprendre ce que je devrais faire. Quelqu'un peut-il expliquer spécifiquement? ou je devrais juste utiliser JavaScript? Désolé pour ma connaissance

Merci d'avoir répondu. Votre avis était très serviable pour moi. :)

0
votes

Vous pouvez ajouter! Important après votre code pour le rendre principal. 

.recipe:hover .submenu{
        display: block !important;
    }

1 commentaires

Merci. J'ai essayé! Important, mais ça ne marche pas. Je téléchargerai dans un codepen.io. Merci pour votre réponse tellement. :)

0
votes

Vous devez réellement ajouter la classe code> recette code> sur un élément, puis dans votre CSS, vous devez ajouter ~ code> pour signifier que les éléments sont au même niveau dans Le DOM.

J'ai également apporté quelques modifications à la CSS afin de vous assurer que le sous-menu ne disparaît pas. P>

p> 

<!DOCTYPE html>
<html>
<meta charset="utf-8">

</html>

<head>
  <title>
    TEST
  </title>
  <style>
    body {
      margin: 0px;
    }
    
    #logo {
      height: 56px;
      padding-top: 15px;
      padding-left: 45px;
      font-size: 17px;
      font-weight: 500;
    }
    
    .title {
      padding-left: 30px;
      padding-bottom: 15px;
    }
    
    .mainmenu {
      border: 1px solid rgb(155, 155, 155);
      text-align: center;
      height: 30px;
      padding-bottom: 5px;
      font-size: 17px;
      font-weight: 400;
      display: flex;
      list-style-type: none;
      margin: 0px;
      padding-top: 11px;
    }
    
    a + a {
      box-shadow: -4px -3px 0 -3px rgb(155, 155, 155);
    }
    
    .submenu {
      background-color: #f2efed;
      height: 190px;
      font-size: 16px;
      font-weight: 300;
      padding-top: 10px;
      padding-left: 10px;
      text-decoration: underline;
      position: absolute;
      margin-top: 36px;
      width: 100%;
      display: none;
    }
    
    a {
      color: black;
      text-decoration: none;
      flex-grow: 1;
      height: 30px;
      padding-bottom: 6px;
    }
    
    .recipe:hover ~ .submenu {
      display: block;
    }
    
    .submenu:hover {
      display: block;
    }
    
    @font-face {
      font-family: 'IBMPlexSansKR-Light';
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Light.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div id="logo">
    <img width=45px src="icons8-solo-cup-100.png">
    <span class="title">cafe in my home</span>
  </div>
  <div class="mainmenu">
    <a href="Home.html">home</a>
    <a href="Recipe.html" class="recipe">Recipe</a>
    <a href="QNA.html">QNA</a>
    <div class="submenu">
      coffee
    </div>
  </div>
</body>

8 commentaires

Wow .. Je n'ai même pas su que l'existence à propos de "~". Je l'ai essayé et ça marche ... merci beaucoup. Je respecte vos connaissances et votre gentillesse. J'étudierai plus plus fort qu'avant. Merci :)

Pouvez-vous cliquer sur le sous-menu? @Brian

Je l'ai réalisé maintenant. Le sous-menu apparaît lorsque je survole, mais lorsque j'essaie de me rapprocher du sous-menu, il disparaît. Est-ce que tu sais pourquoi?? Je suis Googling maintenant à ce sujet. Merci.

@Brian j'essaie de le réparer maintenant;).

@Brian j'ai fini de faire des modifications.

Pouvez-vous me dire comment puis-je le faire? Maintenant, je envisage d'apprendre JavaScript pour mon problème.

C'est réparé. Que voulez-vous exactement?

Pardon. Je l'ai confondu. Merci pour votre commentaire. Bonne journée :)

0
votes

comme le dit Noahrgb, les sélecteurs CSS ne peuvent pas avoir cette syntaxe.

ceci: p> xxx pré>

ne fonctionnera pas. P>

Si vous voulez Sélectionnez la section verrôive du sous-menu et des classes de recette, "Chaîne": p> xxx pré>

étant sûre de ne pas mettre d'espaces entre .recpe code> et .hover code>. p>

Si vous souhaitez le définir sur Affichage: Bloc; Code> Lorsque le est plané et le .submenu code> n'est pas planifié, il suffit de mettre affichage: bloc; code> dans le sélecteur de classe .submenu code> indépendamment du .recpe: plancher Sélecteur comme celui-ci: P> 

.submenu {
    ...
    display: block;
}

.recipe:hover {
    ...
    display: block;
}

0 commentaires
0
votes

.Recipe: Hover .submenu {affichage: bloc;} code> implique que votre .submenu code> est un enfant de .Recpe code>. Vous devez modifier votre balisage en quelque chose comme: xxx pré>

ou, pour un balisage semi-sévère, surtout si votre sous-menu recevra plus d'articles que vous pourriez faire: P> 

<ul class="menu">
  <li>
    <a class"recipe" href="Recipe.html">Recipe</a>
    <ul class="submenu">
      <li>coffee</li>
    </ul>
  </li>
</ul>

0 commentaires
0
votes

Vous pouvez absolument faire cela dans CSS3 à l'aide du sélecteur de sodiblon adjacent. 

!DOCTYPE html>
<html>
   <meta charset="utf-8">
</html>
<head>
    <title>
       TEST
    </title>
    <style>
        body{
            margin: 0px;
        }
        #logo{
            height: 56px;
            padding-top: 15px;
            padding-left: 45px;
            font-size: 17px;
            font-weight: 500;
        }

        
        .title{
            padding-left: 30px;
            padding-bottom: 15px;
        }
        .mainmenu{
            border: 1px solid rgb(155,155,155);
            text-align: center;
            height: 30px;
            padding-top: 17px;
            padding-bottom: 5px;
            font-size: 17px;
            font-weight: 400;
            display: flex;
            list-style-type: none;
            margin: 0px;
            padding-top: 11px;
        }
        a:nth-of-type(1){
              flex-grow: 1;
            border-right: 1px solid rgb(155,155,155);
        }
        a:nth-of-type(2){
              flex-grow: 1;
            border-right: 1px solid rgb(155,155,155);
        }
        a:nth-of-type(3){
              flex-grow: 1;
        }
        .submenu{
            background-color: #f2efed;
            height: 190px;
            font-size: 16px;
            font-weight: 300;
            padding-top: 10px;
            padding-left: 10px;
            text-decoration: underline;
            position: absolute;
            margin-top: 36px;
            width: 100%;
            display: none;
        }
        a{
            color: black;
            text-decoration: none;
        }
        .recipe:hover ~ .submenu{
            display: block;
        }
        @font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
    </style>
</head>
<body>
 <div id="logo">
    <img width=45px src="icons8-solo-cup-100.png">
   <span class="title">cafe in my home</span>
 </div>
   <div class="mainmenu">
       <a href="Home.html">home</a>
       <a class="recipe" href="Recipe.html">Recipe</a>
       <a href="QNA.html">QNA</a>
       <div class="submenu">
           coffee
</div>
</div>
</body>
</html>

1 commentaires

Vous ne pouvez pas survoler des articles sous-menus même qu'il est visible, il devrait être restructuré ou le faire JavaScript.

0
votes

Vous ajoutez simplement ~ entre les sélecteurs pour les adjudiquer ensemble: xxx

0 commentaires
0
votes

Je dirais que vous devez organiser votre sous-menus de manière structurelle de sorte que lorsque vous planiez l'élément, ils seraient visibles lorsque vous essayez de survoler le sous-menu.

Dans votre sous-menu de cas, vous serez caché si vous essayez de faire il est visible. J'ai un peu changé la structure pour montrer le sous-menu. Vous pouvez plus l'optimiser. P>

p> 

<div id="logo">
  <img width=45px src="icons8-solo-cup-100.png">
  <span class="title">cafe in my home</span>
</div>
<ul class="mainmenu">
  <li><a href="Home.html">home</a></li>
  <li class="recipe"><a href="Recipe.html">Recipe</a>
    <div class="submenuwrapper">
      <div class="submenu">
        coffee
      </div>
    </div>
  </li>
  <li><a href="QNA.html">QNA</a></li>
</ul>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO