활성 내비게이션 링크

Question

정상적인 연결 상태 및 마우스 오버 상태가 내 웹 사이트에서 작동하지만 어떤 이유로 활성 상태가 작동하지 않는데 왜 이것이 작동하지 않습니다. 누군가 도와 줄 수 있어요. 활성 상태에서 링크가 원래 색상으로 되돌아 가지 않도록 유지하고 싶습니다.

  ul#menu li a { 
     text-decoration: none; 
     font-family:'Novecento Sans W01 Lt'; 
     font-size:14px; 
     color:white; 
     background-color: #223e99 ; 
     border-left:solid; 
     border-left-color: #223e99 ; 
     border-right:solid; 
     border-right-color: #223e99 ; 
     border-left-width:32px; 
     border-right-width:32px; 
     border-top:solid; 
     border-top-color:#223e99 ; 
     border-top-width:15px; 
     border-bottom:solid; 
     border-bottom-color:#223e99 ; 
     border-bottom-width:15px; 
     margin-left:-18px; 


    } 

    ul#menu li a:hover { 
     text-decoration: none; 
     font-family:'Novecento Sans W01 Lt'; 
     font-size:14px; 
     color:white; 
     background-color: #7fc14b ; 
     border-left:solid; 
     border-left-color: #7fc14b ; 
     border-right:solid; 
     border-right-color: #7fc14b ; 
     border-left-width:32px; 
     border-right-width:32px; 
     border-top:solid; 
     border-top-color:#7fc14b ; 
     border-top-width:15px; 
     border-bottom:solid; 
     border-bottom-color:#7fc14b ; 
     border-bottom-width:15px; 
     margin-left:-18px; 
    } 


    ul#menu li a:active{ 
     text-decoration: none; 
     font-family:'Novecento Sans W01 Lt'; 
     font-size:14px; 
     color:white; 
     background-color: #7fc14b ; 
     border-left:solid; 
     border-left-color: #7fc14b ; 
     border-right:solid; 
     border-right-color: #7fc14b ; 
     border-left-width:32px; 
     border-right-width:32px; 
     border-top:solid; 
     border-top-color:#7fc14b ; 
     border-top-width:15px; 
     border-bottom:solid; 
     border-bottom-color:#7fc14b ; 
     border-bottom-width:15px; 
     margin-left:-18px; 
    } 

Answer 1

active 상태가 조금 다를 수 있습니다. 링크/버튼 또는 요소는 클릭하는 순간 활성화됩니다. 그리고 마우스 버튼을 놓으면 활성 상태가 해제됩니다.

당신이 찾고 있다고 생각하는 것은 과거에 방문한 링크를 표시하는 (그리고 브라우저가 여전히 기억할 수있는) 가상 클래스 인 :visited입니다.) 또는 사용자 정의 .active 클래스 (사용자가 현재 방문중인 페이지를 지정/강조 표시하는 클래스).

EDIT 설명 할 코드가 약간 있습니다.

<ul id="menu"> 
    <li><a href="/">Home</a></li> 
    <li><a href="/news">News</a></li> 
    <li><a href="/about">About</a></li> 
    <li><a href="/contact">Contact</a></li> 
</ul> 

는 처음에는 모두 동일한 모양 :

의 당신은 상단 네비게이션 링크 메뉴를 가정 해 봅시다

는 홈페이지, 뉴스 섹션, 약 및 연락처 페이지으로 지적했다. 당신이 그들 위에 마우스를 가져 가면, 그들은 조금 다르게 보입니다 (당신은 이미 당신 자신의 CSS로 그것을 달성했습니다).

방문자가 현재 약 페이지를 방문 중이며 메뉴에서 강조 표시하려고한다고 가정 해 보겠습니다. 이 경우, 당신은 단지 특정 <li>에 클래스를 추가 할 것입니다, 당신의 스타일에 어떤 스타일을 추가 :

<ul id="menu"> 
    ... 
    <li class="active"><a href="/about"></a></li> <!-- Note the 'class="active"' in the <li> element 
    ... 
</ul> 

ul#menu li.active a { color: red; } 

을 위의 예에서의 About 링크는 빨간색 글꼴 색상에있을 것입니다. 필요에 맞게 스타일을 적용하십시오. 그리고 뒤로 물러서지 마라! CSS 스타일이 계단식으로 (이름이 뭐지 ...) 원하는 모든 속성을 재정의 할 수 있습니다.

Answer 2

다음과 같은 계층 구조에 의해 이러한

주고 CSS를보십시오 :

.main_class .2class ul#menu li a { /* your css here */ }

또는

#main_class #2_class ul#menu li a { /* your css here */ }

예 :

.container .site_content ul#menu li a { 
    /* your css */ 
} 

.container .site_content ul#menu li a:hover { 
    /* your css */ 
} 

.container .site_content ul#menu li a:active { 
    /* your css */ 
} 

Answer 3

:active과 :visited의 차이점을 알아야합니다.

:active은 링크를 클릭 할 때만 표시되며 클릭 한 경우에만 표시되며, 이미 본 링크에는 :visited이 표시됩니다.

---

완전히 다른 점은 CSS를 정리해야한다는 것입니다. 당신은 계속해서 많은 반복을했습니다. font-family 및 font-size과 같은 내용을 ul#menu li a에 신고하면 변경하지 않는 한 ul#menu li a:hover, ul#menu li a:active 및 ul#menu li a:visited에서 반복하지 않아도됩니다.

난 당신을 표시하도록 CSS를 업데이트하는 자유를했다 :

ul#menu li a { 
    text-decoration: none; 
    font-family: 'Novecento Sans W01 Lt'; 
    font-size: 14px; 
    color: white; 
    background-color: #223e99 ; 
    border-left: solid; 
    border-left-color: #223e99 ; 
    border-right: solid; 
    border-right-color: #223e99 ; 
    border-left-width: 32px; 
    border-right-width: 32px; 
    border-top: solid; 
    border-top-color: #223e99 ; 
    border-top-width: 15px; 
    border-bottom: solid; 
    border-bottom-color: #223e99 ; 
    border-bottom-width: 15px; 
    margin-left: -18px; 
} 

ul#menu li a:hover, 
ul#menu li a:active, 
ul#menu li a:visited, { 
    background-color: #7fc14b ; 
    border-left-color: #7fc14b ; 
    border-right-color: #7fc14b ; 
    border-top-color: #7fc14b ; 
    border-bottom-color: #7fc14b ; 
} 

그리고 당신이 좀 더 쉽게 읽을 수 있도록하려는 경우, 당신은과 같이, 짧은 손 선언을 사용할 수 있습니다

를 visited` 대신`의 :`활성

ul#menu li a { 
    text-decoration: none; 
    font-family: 'Novecento Sans W01 Lt'; 
    font-size: 14px; 
    color: white; 
    background-color: #223e99; 
    border: 32px solid #223e99; 
    border-top-width: 15px; 
    border-bottom-width: 15px; 
    margin-left: -18px; 
} 

ul#menu li a:hover, 
ul#menu li a:active, 
ul#menu li a:visited, { 
    background-color: #7fc14b ; 
    border-color: #7fc14b ; 
} 

당신은 CSS Schools