我试图在悬停时更改导航栏链接的背景颜色 和文本颜色，但我无法让它工作。无论我做什么，似乎都没有任何效果。
我在使用 Pure CSS 时从未遇到过问题，但主要是在使用 Bootstrap 时我遇到了这个问题
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Soni's Computer Repair</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="logo">
<center>
<a class="navbar-brand" href="#"><img src="Final.png"/></a>
</center>
</div>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<h6 class="text-center">Copyright © Soni Computer Repairs</h6>
<p class="text-center">www.SoniRepairs.com</p>
</div>
</footer>
</body>
</html>
CSS:
.nav, .navbar-nav {
display: inline-block;
margin:0;
float:none;
margin-top: -15px;
}
.navbar-nav li {
padding-left: 40px;
padding-right: 40px;
}
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
.navbar-brand {
float: none;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.logo img {
height:80px;
margin-top: -15px;
}
.logo {
width: 40%;
margin: 0 auto;
}
@media screen and (max-width: 700px) {
.navbar-nav{
margin-left: auto;
margin-right: auto;
display: table;
table-layout: fixed;
float:none;
margin-top: 10px;
}
.container img {
height:50px;
display: inline-block;
margin-top: -15px;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar > .container {
text-align: center;
}
.collapse.navbar-collapse {
width: auto;
clear: none;
}
}
最佳答案
你的 html 代码显示 navbar-static-top
<div class="navbar navbar-inverse navbar-static-top"></div>
并且在您的 css 中您使用的是 .navbar-fixed-top
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
更新 fiddle https://jsfiddle.net/3ge0b6nr/1/
将您的代码更改为
.navbar.navbar-inverse.navbar-static-top li > a:hover {
color: cyan;
}
关于html - BootStrap - 列表悬停更改颜色 - 导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30287736/