0
Я хотел, чтобы один из моих вкладок Navbar выглядел совершенно иначе, чем другие. По какой-то причине Цвет текста для вкладки, которую я хочу отображать в состоянии зависания, работает в некоторых браузерах, но не в других. & также кажется прерывистым. Текст закладки «RESERVE NOW» должен быть светло-зеленым в состоянии связи & превратитесь в темно-зеленый цвет в режиме Hover. Цвет фона изменяется правильно, но не текст. В основном не работает в Safari.Navbar Text Hover/CSS не работает
Любые мысли? Заранее благодарим за ввод.
Вот ссылка на файл: 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;
}
Вы должны опубликовать минимальный рабочий код вашего кода (HTML/CSS/JS) в фрагменте. См. [Mcve] и [ask] – vanburen
Добро пожаловать в stackoverflow. Отправьте рабочий пример своего кода на jsfiddle или в фрагменте кода. Спасибо :) – www139
OK. Спасибо за ввод. Я постараюсь дать вам больше информации. – jmitteco