哪些CSS规则适用于导航栏中的下拉列表？资源检查器似乎无济于事
哪些CSS规则适用于导航栏中的下拉列表？资源检查器似乎无济于事
提问于 2018-08-07 01:48:19
我现在觉得自己很傻，因为我永远也搞不清楚哪些CSS规则适用于特定状态下的特定元素。Chrome和Firefox的资源检查器似乎没有帮助，或者我一直在错误地使用它们。
问题是导航栏中的一个下拉按钮需要在菜单悬停时保留其紫色背景。在this短片中演示了该问题。
我还创建了一个JSFiddle来演示这个问题。
可以在下面找到在JSFiddle之外重现问题的完整HTML代码和CSS代码。在StackOverflow上运行代码时，您应该将结果视图展开到整个页面，否则导航栏将不可见。
.navbar,
.navbar .navbar-menu,
.navbar .navbar-menu .navbar-end .navbar-dropdown,
.navbar .navbar-menu .navbar-end .navbar-dropdown a,
.navbar .navbar-menu .navbar-end .has-dropdown .navbar-link:hover {
background-color: #3C2148;
}
.navbar .navbar-menu .navbar-end .navbar-item a {
color: white
}
.navbar .navbar-menu .navbar-end .has-dropdown .button {
border: none;
}
.navbar .navbar-menu .navbar-end .has-dropdown a.navbar-link::after {
border-color: #ffdd42;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</head>
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top">
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Language</a>
<div class="navbar-dropdown is-right is-boxed">
<a class="button is-fullwidth" type="submit">English</a>
<a class="button is-fullwidth" type="submit">Dutch</a>
<a class="button is-fullwidth" type="submit">French</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-07 05:04:24
你的JSFiddle不工作了。问题可能出在这部分代码上。
.navbar .navbar-menu .navbar-end .has-dropdown .navbar-link:hover {
background-color: #3C2148;
}尝试将其更改为
.navbar .navbar-menu .navbar-end .has-dropdown .navbar-link{
background-color: #3C2148;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51713084
复制相关文章
相似问题
腾讯云开发者
