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：选择所有孩子（Y）..这是您正在使用的孩子

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/

在外面拿.icon课，然后使用.icon：hover .topnav a

CSS悬停菜单无效

1 个答案: