CSS悬停菜单不起作用答案

【问题标题】：CSS hover menu not workingCSS悬停菜单不起作用
【发布时间】：2017-06-15 00:44:01
【问题描述】：

我正在尝试在 css 中创建一个响应式导航栏。当屏幕宽度足够大时，我想要文本，当它低于某个宽度时，我想要一个下拉框。响应能力开始发挥作用，但悬停功能不起作用。悬停时我只想要一个下拉菜单

这里是 jsfiddle：https://jsfiddle.net/cjbruin/rnmg5gjb/

还有代码

HTML

<div class="topnav" id="myTopnav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="javascript:void(0);" style="font-size:15px" class="icon">&#9776;</a>
</div>

CSS：

.topnav {
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 800px) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .icon:hover .topnav a {
    display: block;
    color: black;
  }
}

【问题讨论】：

但是如果您使用悬停，您将无法保持其活动状态，您可能需要寻找点击。这是在做你想做的事吗？ jsfiddle.net/rnmg5gjb/4
当您将鼠标悬停在图标上时，目前您除了将其更改为黑色之外什么都不做，并且悬停的“显示：块”什么也不做。您将要显示另一个 div，其中包含悬停时出现的下拉菜单的文本和样式
很难说出你在问什么，但.icon:hover .topnav a 不是正确的选择器。没有.icon 的后代.topnav。您需要将悬停状态添加到.topnav。这能达到你想要完成的目标吗？ jsfiddle.net/yswdtg0e
Joseph Merikle 是的，这就是我想要做的事情
John Batts 谢谢，我会试试的

标签： html css responsive-design

【解决方案1】：

.icon:hover .topnav a {
    display: block;
    color: black;
  }

这段代码有问题，.icon 在 .topnav 类中。

CSS 规则：

X Y ：选择所有孩子（Y）..这是您正在使用的那个

X~Y ：选择X旁边的所有Y

所以你的问题有很多解决方案

.icon:hover .topnav a {
    display: block;
    color: black;
  }

把这个改成关注

.icon:hover ~ a {
    display: block;
    color: black;
  }

https://jsfiddle.net/rnmg5gjb/5/

将 .icon 类放在外面并使用 .icon:hover .topnav a

【讨论】：