CSS) 为什么我的 'hover' 不工作？我搜索了 google 但我无法修复它

Question

我先把.submenu设为display:none;。然后我设置 .recipe:hover .submenu{display:block;} 。当我将鼠标悬停在 .recipe 上时，我想制作 .submenu display: 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>

Answer 1

我不是最擅长这个，但我想说这可能与选择 .recipe:hover 然后在它之后选择 .submenu 有关：

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

Answer 2

您可以在代码后添加 !important 使其成为主体。

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

你能在 codeopen.io 中上传整个代码吗？这样您就可以准确地向我们展示您的需求。

Answer 3

您需要实际将 recipe class 添加到元素上，然后在您的 CSS 中，您需要添加 ~ 以表示元素已打开DOM.

同级

我也对 CSS 进行了一些修改，以确保子菜单不会消失。

<!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>

有关通用兄弟组合器 (~) 的更多信息，请阅读 MDN docs。

Answer 4

正如 NoahRGB 所说，CSS selector 不能有那个语法。

这个：

.recipe:hover .submenu

将不起作用。

如果你想让它 select 悬停在子菜单和食谱 class 上，将它们“链接”起来：

.recipe.submenu:hover

确保不要在 .recipe 和 .hover 之间放置任何空格。

如果您想在悬停 .recipe 而 .submenu 未悬停时将其设置为 display: block;，只需将 display: block; 放入 .submenu class select或独立于.recipe:hover select或像这样：

.submenu {
    ...
    display: block;
}

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

Answer 5

.recipe:hover .submenu{display:block;} 表示您的 .submenu 元素是 .recipe 的子元素。您需要将标记更改为：

<a class="recipe" href="Recipe.html">
  Recipe
  <span class="submenu">
    coffee<
  </span>
</a>

或者，对于前语义标记，特别是如果您的子菜单将接收更多项目，您可以这样做：

<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; }

Answer 6

您现在完全可以在 CSS3 中使用 ~ 相邻兄弟选择器来做到这一点。

triggerSelector:hover ~ targetSelector {
    display: block;
}

根据 post How to change one element while hovering over another

!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>

Answer 7

您只需在选择器之间添加 ~ 即可将它们放在一起：

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

Answer 8

我想说的是，您必须以结构化方式设置子菜单的样式，这样当您将鼠标悬停在元素上时，当您尝试将鼠标悬停在子菜单上时，它们就会可见。

在您的情况下，如果您尝试使其可见，子菜单将被隐藏。我稍微改变了结构以显示子菜单。您可以进一步优化它。

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 {
  position: absolute;
  margin-top: 36px;
}

.submenuwrapper {
  position: absolute;
  background-color: #f2efed;
  width: 200px;
  height: 190px;
  font-size: 16px;
  font-weight: 300;
  padding: 40px;
  text-decoration: underline;
  display: none;
}

a {
  color: black;
  text-decoration: none;
}

.recipe:hover>.submenuwrapper {
  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;
}

<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>

CSS) 为什么我的 'hover' 不工作？我搜索了 google 但我无法修复它

CSS) Why is my 'hover' not working? I searched google but I couldn't fix it

html

javascript

css

hover