CSS悬停菜单不起作用

我想在css中创建一个响应式导航栏。当屏幕宽度足够大时，我需要文本，而当它低于某个宽度时，我需要一个下拉框。响应速度正在加快，但悬停功能无法正常工作。我只想要一个下拉菜单徘徊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; 
    } 
}

来源

2017-06-14 Colin Bruin

但是，如果你使用悬停你将无法保持其活动状态，你可能想要寻找一个点击。这是做你想要的吗？ https://jsfiddle.net/rnmg5gjb/4/ –

当您将鼠标悬停在图标上时，目前您除了将其更改为黑色以外，没有做任何其他操作，并且悬停的“display：block”不起作用。您想要显示另一个包含文字和样式的div，以便在悬停时显示下拉菜单 –

难以分辨您要查询的内容，但'.icon：hover .topnav a'不是正确的选择器。没有'.icon'的'.topnav'后代。您需要将悬停状态添加到“.topnav”中。这是否做你想要完成的？ https://jsfiddle.net/yswdtg0e/ –

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

这个代码是问题，.icon是在.topnav类中。

CSS规则：

XY：选择所有的孩子（Y）..这是一个你正在使用

X〜Y：选择所有Y`s旁边的X

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

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

改变这对以下

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

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

外

采取.icon类，并使用.icon：悬停.topnav一个

来源

2017-06-14 16:44:01 Jassi

CSS悬停菜单不起作用

回答

相关问题