CSS悬停菜单不起作用
CSS悬停菜单不起作用
提问于 2017-06-15 00:04:45
我正在尝试在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">☰</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;
}
}回答 1
Stack Overflow用户
发布于 2017-06-15 00:44:02
.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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44549675
复制相关文章
相似问题
腾讯云开发者
