个人中心
gpt4 book ai didi

html - 导航栏文本悬停/CSS 不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 10:59:33 25 4
gpt4 key购买 nike

我想让我的导航栏选项卡之一看起来与其他选项卡完全不同。出于某种原因，我想在悬停状态下显示的选项卡的文本颜色在某些浏览器中有效，但在其他浏览器中无效，而且似乎是间歇性的。“立即预订”选项卡的文本在链接状态下应该是浅绿色，在悬停状态下会变成深绿色。背景颜色会正确更改，但文本不会更改。主要不适用于 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;  
}

最佳答案

您的 CSS 中存在选择器和特异性问题，您的规则并未真正针对列表项中的 anchor (选择 anchor 时，您可以在检查器工具中看到您的样式丢失)。要解决此问题，只需在您的 .nav-book 类名称中定义 anchor 的目标链，如下所示:

/* abstracted the list-item styles from the anchor styles */

.nav-book {
  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%);
  text-align: center;
}

.navbar-default .navbar-nav .nav-book > a,
.navbar-default .navbar-nav .nav-book > a:focus {
  color: #cff879;
  font-size: 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.navbar-default .navbar-nav .nav-book > a:hover,
.navbar-default .navbar-nav .nav-book > a:active,
.navbar-default .navbar-nav .nav-book.active > a,
.open .dropdown-toggle.nav-book {
  color: #73a014;
  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%);
}

注意链条是如何从导航项的顶层开始的，.navbar-default .navbar-nav，这是因为我们必须覆盖 Bootstrap CSS 的特殊性(因此我们可以规避有害规则，例如 !important 标志)。

关于html - 导航栏文本悬停/CSS 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34447086/

25 4 0
文章推荐： css - 如何删除带有子菜单项的导航元素周围的蓝色阴影？
文章推荐： python - 从 Python PasteScript 自动生成 Python Egg
文章推荐： python - 在 Python 中，当每个选项可以有多个参数时，是否有更好的方法来处理命令行选项
文章推荐： python - 在 Mac OS X 上为另一个 Python 版本安装 BeautifulSoup
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com