호버시 부트 스트랩 헤더 링크 색 변경

Question

이 간단한 문제를 해결하기 위해 모든 노력을 다했지만이 기능이 작동하지 않는 이유를 알 수 없습니다. 헤더의 코드는

/*-- header --*/ 
.header{ 
    padding: 1em 0; 
    background: url(../images/header-bg.png) no-repeat 0px 0px; 
    background-size: 27% 100%; 
    margin-top:0px; 
} 
.logo{ 
    float:left; 
    margin-top:0.5em; 
} 
span.menu{ 
    display:none; 
} 
.top-nav{ 
    float:right; 
} 
.top-nav ul{ 
    margin:0; 
    padding:0; 
} 
.top-nav ul li{ 
    display:inline-block; 
} 
.top-nav ul li a{ 
    text-transform:uppercase; 
    font-weight:700; 
    color:#2C3E50; 
    margin:1em 1.3em; 
    display:inline-block; 
    text-decoration:none; 
} 
.top-nav ul li a:hover,.top-nav ul li.active a{ 
    color:#f22b2b; 
} 



<style> 
     #navtopbar { 
      background-color: #ffffff; 
     } 
     } 
</style> 

<div class="nav navbar-fixed-top" id="navtopbar"> 
    <div class="container-fluid"> 
        <div class="top-nav"> 
         <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <span class="menu"> </span> 
         <div class="navbar-collapse collapse"> 
          <ul> 
           <li id="linkcolor" class="active"><a href="~/index/index">Home</a></li> 
           <li id="linkcolor"><a href="~/Index/AboutUs">About</a></li> 
           <li><a href="~/Doctor/Index">Doctors</a></li> 
           <li><a href="~/Hospitals/Index">Hospitals</a></li> 
           <li><a href="~/Clinics/Index">Clinics</a></li> 
           <li><a href="~/Home/Contact">Contact</a></li> 

          </ul> 

         </div> 
        </div> 
       </div> 
</div> 

가 활성화에 표시되는 색상을하고 호버에 기본적으로 파란색입니다. 나는 그것을 빨간색으로 바꾸고 싶다. CSS에서는

.top-nav ul li a:hover,.top-nav ul li.active a{ 
    color:#f22b2b; 

하지만 여전히 파란색을 표시합니다. 그래서 나는 인라인 스타일로 CSS를 덮어 쓰려고합니다.

나는 .nav > li > a {color: red} 또는 .navbar-collapse > ul > li > a {color: red} 또는 .nav > li {color:red} 또는 .nav > li > a:hover{color:red;} 또는 ul.nav a:hover, ul.nav a:focus, ul.nav a:active { color:red; } 아무도 나를 위해 작동하지 않습니다 시도했다. 실수를 어디에서했는지 제안 해주세요.

PS : 스크린 샷은

Answer 1

사용에게이 당신을 t 시도

.navbar-collapse ul li a:hover, .navbar-collapse ul li a:active { color:red; } 

Answer 2

를 부착 당신이 앵커를 목표로 삼아야 할 때, 당신은 그 자리에 앉아야합니다. 여기 예에서

봐 : 위의 변경이 코드에 맞게 만들 경우

.navbar-default .nav > li > a:hover, 
.navbar-default .nav > li > a:focus, 
.navbar-default .nav > li > a.active { 
    color: #fe0000; 
} 

당신이 그것을 가져가에 색상을 변경 것이라는 점을 것을을 발견 할 당신을 위해 초점을 활성화합니다.

희망 하시겠습니까?

Answer 3

작동합니다 아래 계층

.navbar-default .navbar-nav>li>a:hover { 
    color:red; 
} 

LIVE DEMO