호버의 테두리 및 링크 색상 변경

Question

호버에서 테두리와 링크의 색상을 동시에 변경하고 싶습니다. 나는 을 nav ul li a:hover에 사용해 봤지만 링크가 활성화되어 있으면 마우스를 올려 놓아도 빨간색으로 유지되는 것이 문제입니다.

CSS :

nav ul li { 
    display: inline-block; 
    margin: 0 10px; 
} 
nav ul li a { 
    color:red; 
    text-decoration:none; 
} 
nav ul li a:hover { 
    color: #000; 
} 
nav ul li a.active { 
    border-bottom: 2px solid red; 
} 

HTML :

<nav> 
    <ul> 
     <li><a class="active" href="#">Home</a> 
     </li> 
     <li><a href="#">About</a> 
     </li> 
     <li><a href="#">Contact Us</a> 
     </li> 
    </ul> 
</nav> 

JSFiddle Demo

Answer 1

인해 스타일 시트의 폭포 자연, 그리고 선택기가 공유한다는 사실에 같은 specificity, 후자의 스타일이 그것을 덮어 썼다. 이 같은 선택기의 순서를 변경할 수 :

Updated Example

nav ul li a.active { 
    border-bottom: 2px solid red; 
} 
nav ul li a:hover { 
    color: #000; 
    border-bottom: 2px solid #000; 
} 

또는, 당신은 또한 단순히 요소 유형, a 제거하여 nav ul li a.active의 specificity을 줄일 수 ->nav ul li .active합니다. (example)