时间戳

首页 > 解决方案 > Bootstrap Downdown 菜单按钮颜色

html - Bootstrap Downdown 菜单按钮颜色

问题描述

我正在使用引导程序创建一个网站，但下拉菜单按钮的颜色有问题。让我们来看看：

这就是它的外观（当我缩小我的 webrwoser 时它会出现）

这就是它的样子（当我缩小我的网络浏览器时它会出现）

在此处输入图像描述

这就是我把鼠标放在上面的样子。我想要的只是将这三行的颜色（图 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;

希望有人能帮助新手解决这个问题，谢谢;）

标签： htmlcsstwitter-bootstrap

解决方案

当您将鼠标光标放在它上面时，尝试在 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>

推荐阅读