导航栏颜色不符合预期

Question

我的网站上的导航栏出现问题。我想用浅红色的悬停效果让它变成红色，但出于某种原因它会变成红色和黑色。

如何修复颜色？

＆＃13;

＆＃13;

.navbar-inverse {
     background-color: #cc0001;
     
}

＆＃13;

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
       <a href="index.html"><img src="..\images\rpm.png" id="logo" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
		<li class="active"><a href="videos.html">Videos</a></li>
		<li class="active"><a href="aboutus.html">About us</a></li>
		<li class="active"><a href="contactus.html">Contact us</a></li>
		
        
      </ul>
      <ul class="nav navbar-nav navbar-right">
      </ul>
    </div>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你应该使用：hover {}来提供悬停效果。

＆＃13;

＆＃13;

.navbar-inverse {
  background-color: #f50c0c  !important;
  border-color: #080808;
}
.active a:hover {
    background-color: pink !important;
}
.nav li a{
  background-color: red !important;
}

＆＃13;

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
       <a href="index.html"><img src="..\images\rpm.png" id="logo" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
		<li class="active"><a href="videos.html">Videos</a></li>
		<li class="active"><a href="aboutus.html">About us</a></li>
		<li class="active"><a href="contactus.html">Contact us</a></li>
		
        
      </ul>
      <ul class="nav navbar-nav navbar-right">
      </ul>
    </div>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要记住什么？

• 由于您使用的是bootstrap，默认的bootstrap.css正在应用于导航栏导航按钮，因此请确保添加！important 添加每个自定义CSS的结尾它应用了。
• 从主页以外的其他列表项中删除“有效”类。这就是为什么每个人默认情况下黑色背景的原因。
• 您可以使用。navbar-nav li:hover在悬停时添加自定义灯光背景幕，如下所述。
• 加分：如果您希望活动类不是黑色或者是一些红色阴影，您可以为它实现背景颜色以及使用.navbar-nav li.active a。

.navbar-inverse {
     background-color: #cc0001 !important;  
}

.navbar-nav li a:hover{
background-color: #ff3232 !important;
color:white;
}

.navbar-nav li.active a{
background-color: #ff0000 !important;  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
       <a href="index.html"><img src="http://via.placeholder.com/50x50" id="logo" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
		<li><a href="videos.html">Videos</a></li>
		<li><a href="aboutus.html">About us</a></li>
		<li><a href="contactus.html">Contact us</a></li>   
      </ul>
      <ul class="nav navbar-nav navbar-right">
      </ul>
    </div>
  </div>
</nav>