：悬停不工作我错过了什么或做错了什么？

Question

* {
    margin: 0;
    padding: 0;
}
.navbar {
    display: flex;
    justify-content: space-around;
    background-color: #1A2456;
    padding: 1em;
    align-items: center;
    margin: 10px;
}
h2 {
    color: #FF8B68 ;
}
li {
    list-style: none;
}
li a, h2 a {
    text-decoration: none;
    color: #FF8B68;
}
.how {
    margin-left: 31em;
}
.dropdown ul {
    display: none;
  
}
.workflow:hover .dropdown ul { 
   display: unset;
}

<!DOCTYPE html>
<html lang="en">

<head>
<title>Document</title>
</head>

<body>
  <header>
    <div class="navbar">
      <h2> <a href="#">MONOGRAM</a> </h2>
      <li><a href="#" class="how">HOW IT WORKS</a></li>
      <li><a href="#" class="workflow">WORKFLOW</a>
        <div class="dropdown">
          <ul>
            <li>PHOTO EDITING</li>
            <li>VIDEO & FILMMAKING</li>
            <li>MUSIC & AUDIO</li>
            <li>VIRTUAL PRODUCTION</li>
          </ul>
        </div>
      </li>
      <li><a href="#">DOWNLOAD</a></li>
      <li><a href="#">SUPPORT</a></li>
      <li><a href="#">SHOP</a></li>
      <li><a href="#"><i class="gg-shopping-bag"></i></a></li>
    </div>
  </header>
</body>

</html>

当我将鼠标悬停在工作流 link 上时，我想显示下拉菜单的内容，我已将其命名为 class .dropdown，但是当我将鼠标悬停在工作流程 link，没有任何反应。

我哪里做错了？是使用了错误的选择器吗？如果是这样，我应该使用什么？

Answer 1

您的代码有几个问题需要更正。

首先，您用 .dropdown ul 隐藏了 ul，但在任何情况下都不再显示它。

而您正在尝试 select child .dropdown of .workflow 但它不是 child，是兄弟姐妹。因此，您需要将下拉列表移至 .workflow 或将 select 或更改为 .workflow:hover + .dropdown

但是，当您使用同级 select 或者，您将失去在下拉菜单上移动的能力，因为当鼠标离开 .workflow 时，菜单会再次隐藏。

所以，我建议你将.workflowclass从a标签移动到li标签，以覆盖children。

您可以在下面找到工作示例。请注意 li 有 position: relative 属性和 .dropdown 有 position: absolute; top: 100%; 属性。

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #1a2456;
  padding: 1em;
  align-items: center;
  margin: 10px;
}

h2 {
  color: #ff8b68;
}

li {
  list-style: none;
  position: relative;
}

li a,
h2 a {
  text-decoration: none;
  color: #ff8b68;
}

.how {
  margin-left: 31em;
}

li .dropdown {
  display: none;
  position: absolute;
  top: 100%;
}

.workflow:hover .dropdown {
  display: block;
  background: grey;
}

<header>
  <div class="navbar">
    <h2> <a href="#">MONOGRAM</a> </h2>

    <li><a href="#" class="how">HOW IT WORKS</a></li>
    <li class="workflow"><a href="#">WORKFLOW</a>
      <div class="dropdown">
        <ul>`enter code here`
          <li>PHOTO EDITING</li>
          <li>VIDEO & FILMMAKING</li>
          <li>MUSIC & AUDIO</li>
          <li>VIRTUAL PRODUCTION</li>
        </ul>
      </div>
    </li>
    <li><a href="#">DOWNLOAD</a></li>
    <li><a href="#">SUPPORT</a></li>
    <li><a href="#">SHOP</a></li>
    <li><a href="#"><i class="gg-shopping-bag"></i></a></li>

  </div>
</header>

Answer 2

首先，您将 .dropdown ul 设置为 display: none，但您并未在 .workflow:hover .dropdown 中将其设置回默认值，因为它针对的是 .dropdown class 而不是 ul 元素。

要么将 .dropdown ul 更改为 .dropdown，要么将悬停设置为 .workflow:hover .dropdown ul。

现在是主要问题，...

使用 Inspect Element 后，我注意到 .dropdown class 不是 .workflow 的子元素，而是相邻元素。

要解决这个问题，您应该使用 + 选择器，它会选择相邻的兄弟元素或第一个元素之后的直接元素。

您的代码现在应该是这样的：

.dropdown ul {
    display: none;
}

.workflow:hover + .dropdown ul { 
    display: block;
}

此外，您可以在此处阅读更多 CSS 选择器：

Answer 3

在 li 元素中使用 class 的工作流程它会起作用。喜欢：

<li class="workflow"><a href="#">WORKFLOW</a>

* {
    margin: 0;
    padding: 0;
}
.navbar {
    display: flex;
    justify-content: space-around;
    background-color: #1A2456;
    padding: 1em;
    align-items: center;
    margin: 10px;
}
h2 {
    color: #FF8B68 ;
}
li {
    list-style: none;
}
li a, h2 a {
    text-decoration: none;
    color: #FF8B68;
}
.how {
    margin-left: 31em;
}
.dropdown ul {
    display: none;
  
}
.workflow:hover .dropdown ul { 
   display: unset;
}

<!DOCTYPE html>
<html lang="en">

<head>
<title>Document</title>
</head>

<body>
  <header>
    <div class="navbar">
      <h2> <a href="#">MONOGRAM</a> </h2>
      <li><a href="#" class="how">HOW IT WORKS</a></li>
      <li class="workflow"><a href="#">WORKFLOW</a>
        <div class="dropdown">
          <ul>
            <li>PHOTO EDITING</li>
            <li>VIDEO & FILMMAKING</li>
            <li>MUSIC & AUDIO</li>
            <li>VIRTUAL PRODUCTION</li>
          </ul>
        </div>
      </li>
      <li><a href="#">DOWNLOAD</a></li>
      <li><a href="#">SUPPORT</a></li>
      <li><a href="#">SHOP</a></li>
      <li><a href="#"><i class="gg-shopping-bag"></i></a></li>
    </div>
  </header>
</body>

</html>

：悬停不工作我错过了什么或做错了什么？

:hover not working what am i missing or doing wrong?

html

css

hover

css-selectors