html - CSS悬停菜单不起作用

Question

我正在尝试在 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;
  }
}

Answer 1

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

这段代码就是问题所在，.icon 在 .topnav 类中。

CSS 规则:

X Y :选择所有 child (Y) ..这是你正在使用的 child

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

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

1.

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

将此更改为以下内容

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

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

1. 将 .icon 类带到外面并使用 .icon:hover .topnav a