Javascript CSS）为什么我的'；悬停'；不工作？我搜索了谷歌，但我找不到'；我修不好_Javascript_Html_Css_Hover

Javascript CSS）为什么我的'；悬停'；不工作？我搜索了谷歌，但我找不到'；我修不好

javascript html css

Javascript CSS）为什么我的'；悬停'；不工作？我搜索了谷歌，但我找不到'；我修不好,javascript,html,css,hover,Javascript,Html,Css,Hover,我首先将。子菜单设置为显示：无。然后我设置.recipe:hover.submenu{display:block；}。当我将鼠标悬停在.recipe上时，我想使子菜单显示：block。但它不起作用。你能告诉我为什么它不工作吗？我真的搞不懂。使用javascript是解决这个问题的唯一方法吗？这是我的密码。多谢各位 <!DOCTYPE html> <html> <meta charset="utf-8"> </html> &

我首先将

。子菜单

设置为

显示：无。然后我设置.recipe:hover.submenu{display:block；}
。当我将鼠标悬停在.recipe
上时，我想使子菜单
显示：block。但它不起作用。你能告诉我为什么它不工作吗？我真的搞不懂。使用javascript是解决这个问题的唯一方法吗？这是我的密码。多谢各位
<!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 href="Recipe.html">Recipe</a>
       <a href="QNA.html">QNA</a>
       <div class="submenu">
           coffee
</div>
</div>
</body>


试验
身体{
边际：0px；
}
#标志{
高度：56px；
填充顶部：15px；
左侧填充：45px；
字号：17px；
字号：500；
}
.头衔{
左侧填充：30px；
垫底：15px；
}
.主菜单{
边框：1px实心rgb（155）；
文本对齐：居中；
高度：30px；
填充顶部：17px；
垫底：5px；
字号：17px；
字体大小：400；
显示器：flex；
列表样式类型：无；
边际：0px；
填充顶部：11px；
}
a：第n种类型（1）{
柔性生长：1；
右边框：1px实心rgb（155155）；
}
a：第n种类型（2）{
柔性生长：1；
右边框：1px实心rgb（155155）；
}
a：第n种类型（3）{
柔性生长：1；
}
.子菜单{
背景色：#f2efed；
高度：190px；
字体大小：16px；
字体大小：300；
填充顶部：10px；
左侧填充：10px；
文字装饰：下划线；
位置：绝对位置；
边缘顶部：36px；
宽度：100%；
显示：无；
}
a{
颜色：黑色；
文字装饰：无；
}
.配方：悬停.子菜单{
显示：块；
}
@字体面{font-family:'IBMPlexSansKR-Light'；src:url（'https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR Light.woff'）格式（'woff'）；字体大小：正常；字体样式：正常；}
我家的咖啡馆
咖啡
我不是这方面的佼佼者，但我想说这可能与选择有关。配方：将悬停，然后在它之后选择。子菜单
：
    .recipe:hover .submenu{
        display: block;
    }

你可以添加！重要的是在你的代码之后，让它成为主要的
.recipe:hover .submenu{
        display: block !important;
    }

你能在codeopen.io中上传整个代码吗？因此，您可以准确地向我们展示您需要的内容。
您需要将配方
类实际添加到元素中，然后在CSS中，您需要添加~
，以表示元素在DOM中处于同一级别
我还对CSS做了一些修改，以确保子菜单不会消失


试验
身体{
边际：0px；
}
#标志{
高度：56px；
填充顶部：15px；
左侧填充：45px；
字号：17px；
字号：500；
}
.头衔{
左侧填充：30px；
垫底：15px；
}
.主菜单{
边框：1px实心rgb（155155155）；
文本对齐：居中；
高度：30px；
垫底：5px；
字号：17px；
字体大小：400；
显示器：flex；
列表样式类型：无；
边际：0px；
填充顶部：11px；
}
a+a{
盒影：-4px-3px0-3pxRGB（155155155）；
}
.子菜单{
背景色：#f2efed；
高度：190px；
字体大小：16px；
字体大小：300；
填充顶部：10px；
左侧填充：10px；
文字装饰：下划线；
位置：绝对位置；
边缘顶部：36px；
宽度：100%；
显示：无；
}
a{
颜色：黑色；
文字装饰：无；
柔性生长：1；
高度：30px；
垫底：6px；
}
.配方：悬停~子菜单{
显示：块；
}
.子菜单：悬停{
显示：块；
}
@字体{
字体系列：“IBMPlexSansKR Light”；
src:url（'https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR Light.woff'）格式（“woff”）；
字体大小：正常；
字体风格：普通；
}
我家的咖啡馆
咖啡
正如NoahRGB所说，CSS选择器不能有这种语法
这：
这是行不通的
如果您希望它选择子菜单和配方类的悬停，请“链接”它们：
确保在.recipe
和.hover
之间不要放置空格
如果要将其设置为display:block
当.recipe
悬停且.submenu
未悬停时，只需将显示：block子菜单中的code>类选择器独立于。配方：悬停
选择器，如下所示：
。子菜单{
...
显示：块；
}
.食谱：悬停{
...
显示：块；
}
.recipe:hover.submenu{display:block；}
表示您的.submenu
元素是.recipe的子元素。
您需要将标记更改为以下内容：
<a class="recipe" href="Recipe.html">
  Recipe
  <span class="submenu">
    coffee<
  </span>
</a>



或者，对于fore语义标记，尤其是如果您的子菜单将接收更多您可以执行的项目：
<ul class="menu">
  <li>
    <a class"recipe" href="Recipe.html">Recipe</a>
    <ul class="submenu">
      <li>coffee</li>
    </ul>
  </li>
</ul>




咖啡




并将css更改为：
.menu li:hover.submenu{display:block；}
现在，您完全可以在CSS3中使用~nexting sibling选择器执行此操作
triggerSelector:hover ~ targetSelector {
    display: block;
}

据邮报报道

！DOCTYPE html>
试验
身体{
边际：0px；
}
#标志{
<ul class="menu">
  <li>
    <a class"recipe" href="Recipe.html">Recipe</a>
    <ul class="submenu">
      <li>coffee</li>
    </ul>
  </li>
</ul>

triggerSelector:hover ~ targetSelector {
    display: block;
}

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