【发布时间】：2015-12-24 04:01:31
【问题描述】：
我想让我的一个导航栏选项卡看起来与其他选项卡完全不同。 出于某种原因，我想在悬停状态下显示的选项卡的文本颜色在某些浏览器中有效，但在其他浏览器中无效，而且似乎是断断续续的。 “立即保留”选项卡的文本在链接状态下应该是浅绿色，在悬停状态下会变成深绿色。 背景颜色正确更改，但文本没有更改。 主要是在 Safari 中不起作用。
有什么想法吗？ 提前感谢您的意见。
这是文件的链接：http://www.buzzpunchmedia.com/kuyaba/stack.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NavBar</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.body-modal {
}
</style>
<link href="stack.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body>
<div class="container-fluid" id="wrapper">
<div class="container-fluid" id="nav-container">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><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 menu-top" href="#">Menu <span class="glyphicon glyphicon-hand-right"></span></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav navbar-right">
<li id="nav-home"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li id="nav-rooms"><a href="#">Rooms</a></li>
<li id="nav-restaurant"><a href="#">Restaurant</a></li>
<li id="nav-bar"><a href="#">Bar</a></li>
<li class="dropdown" id="nav-more"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">More<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="active active-text"><a href="#">Gallery/Tour</a></li>
<li><a href="#">About/History</a></li>
<li><a href="#">Functions</a></li>
<li><a href="#">Gift Shop</a></li>
</ul>
</li>
<li id="nav-gallery"><a href="#">Gallery/Tour</a></li>
<li id="nav-about"><a href="#">About/History</a></li>
<li id="nav-functions"><a href="#">Functions</a></li>
<li id="nav-giftshop"><a href="#">Gift Shop</a></li>
<li class="nav-book" id="nav-book"><a href="#">RESERVE NOW</a></li>
</ul> </div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
</body>
</html>
<!
#wrapper {
padding-right: 0px;
padding-left: 0px;
background-image: url(images/bamboo_back.jpg);
background-repeat: repeat;
}
.navbar.navbar-default {
border-width: 0px;
border-radius: 0px;
background-color: #BFBFBF;
margin-top: 0px;
margin-bottom: 0px;
}
#nav-container {
background-color: #BFBFBF;
box-shadow: 0px 7px 10px 0px #212121;
position: relative;
z-index: 8;
}
.menu-top {
display: none;
}
.glyphicon.glyphicon-home {
font-size: 16px;
}
#nav-home {
font-size: 20px;
}
#nav-rooms {
font-size: 20px;
}
#nav-restaurant {
font-size: 20px;
}
#nav-bar {
font-size: 20px;
}
#nav-more {
font-size: 20px;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background-color: #73a014 !important;
background-image: -webkit-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
background-image: linear-gradient(180deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%) !important;
background-repeat: repeat-x !important;
color: #FFFFFF;
outline: 0 none;
text-decoration: none;
font-size: 16px;
}
#nav-book {
font-size: 20px;
color: #73A014;
}
.active-text {
font-size: 20px;
}
.nav-book, .nav-book:focus {
text-align: center;
color: #CFF879 !important;
font-size: 20px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #73a014;
background-image: -webkit-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
background-image: -moz-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
background-image: -o-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
background-image: linear-gradient(180deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
}
.nav-book:hover, .nav-book:active, .nav-book.active, .open .dropdown-toggle.nav-book {
color: #73a014 !important;
font-size: 20px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CFF879;
background-image: -webkit-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
background-image: -moz-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
background-image: -o-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
background-image: linear-gradient(180deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
}
#nav-gallery {
display: none;
}
#nav-giftshop {
display: none;
}
#nav-functions {
display: none;
}
#nav-about {
display: none;
}
【问题讨论】：
-
您需要在 Snippet 中发布您的代码 (HTML/CSS/JS) 的最小工作示例。见minimal reproducible example 和How to Ask
-
欢迎来到stackoverflow。请在 jsfiddle 或代码 sn-p 上发布您的代码的工作示例。谢谢你:)
-
好的。感谢您的输入。我会尽力为您提供更多信息。
标签： html css twitter-bootstrap