我正在使用 bootstrap 制作个人网站,我有一个透明的导航栏,如下所示:
这样写:
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Jon Snow - Knows Nothing</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
<a href="#about">About Me</a>
</li>
<li class="page-scroll">
<a href="#work">Work</a>
</li>
<li class="page-scroll">
<a href="#blog">Blog</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact Me</a>
</ul>
</div>
</div>
</nav>
这是为桌面和移动网站设置不同配置文件的 CSS 的方式:
@media only screen
and (min-width: 768px) {
.navbar.navbar-default {
padding:6px;
background: rgba(0, 0, 0, 0);
border: none;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
}
@media only screen and (max-width: 767px) {
.navbar.navbar-default {
background: rgba(0, 0, 0, .5);
border: none;
}
.icon-bar {
background-color:#ffffff !important;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
我正在尝试在悬停时添加高亮显示并聚焦到我的导航栏元素,它应该看起来像这样:
我尝试了这个的变体,但没有成功:
.nav li > a {
background-color:#000000;
color: #ffffff;
}
这里还有 fiddle :JSFiddle
最佳答案
这可能有用!
.navbar.navbar-default .navbar-nav li a:hover {
background-color:#000000;
color: #ffffff;
border-radius:5px;
}
关于html - 为 Bootstrap 导航栏元素添加白色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34581056/