Question

所以我希望活动页面使用与悬停设置相同的设置。无论我怎么改变css，我都无法让它工作......很长一段时间以来我已经在这个页面上工作了所以我可能会错过一些简单的东西......

更改前的Style.css

.navbar-default .navbar-brand {
    color: #fff;
    border-left:solid;
    border-right:solid;
    border-top:none;
    border-bottom:none;
    border-color:#202020;
    border-width:0.1pt;
  }
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus {
    color: #fff;
    border-left:solid;
    border-right:solid;
    border-top:none;
    border-bottom:none;
    border-color:#707070;
    border-width:0.1pt;
    background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #404040 20%);
  }
  .navbar-default {
    font-size: 14px;
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #202020 20%);
    border-width: 0px;
    border-radius: 0px;
  }
  .navbar-default .navbar-nav>li>a {
    color: #fff;
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #202020 20%);
    border-left:none;
    border-right:solid;
    border-top:none;
    border-bottom:none;
    border-color:#202020;
    border-width:0.1pt;
  }
  .navbar-default .navbar-nav>li>a:hover,
  .navbar-default .navbar-nav>li>a:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #404040 20%);
    border-left:solid;
    border-right:solid;
    border-top:none;
    border-bottom:none;
    border-color:#707070;
    border-width:0.1pt;
  }
  .navbar-default .navbar-nav>.active>a,
  .navbar-default .navbar-nav>.active>a:hover,
  .navbar-default .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: rgba(231, 231, 231, 1);
  }
  .navbar-default .navbar-toggle {
    border-color: #ddd;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: #ddd;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
  }
  .navbar-default .navbar-toggle:hover .icon-bar,
  .navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #000000;
  }
.navbar-default .navbar-right>li>a {
  border-left:solid;
border-width:0.1pt;
border-color:#202020;
}

菜单

<div class="navbar navbar-default navbar-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="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>
            <a href="index.php" class="navbar-brand">Per Källström</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Comming soon</a></li>
                <li><a href="#">Comming soon</a></li>
                <li><a href="contact.php" class="active">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="admin.php">Admin</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

根据您的HTML代码。 a标记包含活动类。那么它应该是.navbar-default .navbar-nav>a.active,而不是.navbar-default .navbar-nav>.active>a。

重要提示

然而，bootstrap声明活动类应该在li元素上切换，而不是在a标记上。请查看以下链接以获取正确的HTML。 https://getbootstrap.com/examples/navbar/

<强>例如

<li class="active"><a href="contact.php" >Contact</a></li>

Answer 2

现在回答：你确实错过了一些简单的狗屎，li将有.active类，所以将其添加到你的所有悬停效果中：.navbar-default .navbar-nav>li.active>a

boostrap菜单活动页面不显示样式

2 个答案: