Question

我正在使用引导程序制作网站，并且下拉菜单按钮的颜色有问题。让我们看看：

这是它的外观（当我缩小网络浏览器时会出现）

这就是当我将鼠标放在上面时的样子。我想要的只是将这三行的颜色（图1，您看不到它们，因为它们是白色的按钮）变为黑色，因此我可以在导航栏的白色背景上看到它们。

这是html代码

<div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="img/bong.png"></a>
        </div> <!-- end of navbar header-->

和CSS代码

.navbar {
background-color: white;
border-bottom: 1px solid silver;
padding: 1% 0;
}
.navbar-brand {
min-height: 50px;
padding: 0 15px 5px;
}
.navbar-nav li {
padding-right: 20px;
}
.navbar-inverse .navbar-nav li a {
color: black;
}
.navbar-inverse .navbar-nav li a:hover {
background-color: white;
}
.navbar-header {
padding-bottom: 0px;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: white;
}
.navbar-inverse .navbar-toggle {
border-color: black;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: black;

希望有人会帮助新手解决该问题，谢谢;）

Answer 1

在将鼠标光标放在span标签上时，尝试在其上应用悬停css。并在将鼠标置于按钮上时更改背景颜色。

<html>
<head>
<style> 
        .navbar {
        background-color: white;
        border-bottom: 1px solid silver;
        padding: 1% 0;
        }
        .navbar-brand {
        min-height: 50px;
        padding: 0 15px 5px;
        }
        .navbar-nav li {
        padding-right: 20px;
        }
        .navbar-inverse .navbar-nav li a {
        color: black;
        }
        .navbar-inverse .navbar-nav li a:hover {
        background-color: white;
        }
        .navbar-header {
        padding-bottom: 0px;
        }
        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        border-color: white;
        }
        .navbar-inverse .navbar-toggle {
        border-color: black;
        }
        .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
        background-color: black;
        }
        span:hover{
            background-color: blue;
        }
</style>
</head>
<body>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span><br/>
                <span class="icon-bar"></span><br/>
                <span class="icon-bar"></span>
            </button>
                    <a class="navbar-brand" href="#"><img src="https://i.stack.imgur.com/B0wdX.png"></a>
                </div>

  </body>
</html>

Bootstrap下拉菜单按钮颜色

1 个答案: