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

【问题标题】：:hover not working what am i missing or doing wrong?：悬停不工作我错过了什么或做错了什么？
【发布时间】：2021-08-05 04:09:54
【问题描述】：

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

当我将鼠标悬停在工作流链接上时，我想显示下拉菜单的内容，我将其命名为 .dropdown，但是当我将鼠标悬停在工作流链接上时，什么也没有发生。

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

【问题讨论】：

检查特异性
.workflow:hover .dropdown 选择器不起作用，因为 .dropdown 不是 .workflow 元素的子元素

标签： html css css-selectors hover

【解决方案1】：

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

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

您正在尝试选择.workflow 的孩子 .dropdown，但它不是孩子，而是兄弟姐妹。所以要么你需要移动.workflow中的下拉菜单，要么将选择器更改为.workflow:hover + .dropdown

但是，当您使用同级选择器时，您将无法在下拉菜单上移动，因为当鼠标离开 .workflow 时，菜单会再次隐藏。

所以，我建议你将.workflow 类从a 标记移动到li 标记以覆盖孩子。

您可以在下面找到工作示例。请注意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>

【讨论】：

【解决方案2】：

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

要么将.dropdown ul 更改为.dropdown，要么像.workflow:hover .dropdown ul 一样进行悬停。

现在主要问题，...

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

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

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

.dropdown ul {
    display: none;
}

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

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

【讨论】：

非常感谢，现在我知道我做错了什么，我把兄弟姐妹和孩子搞混了。

【解决方案3】：

在 li 元素中使用工作流类它将起作用。喜欢：

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

【讨论】：