마우스로 선택한 경우 li의 배경색을 변경할 수 있어야합니다. CSS 사용하기

Question

나는 li이없는 ul 메뉴가 있습니다 : 마우스로 선택한 경우 li의 배경색을 변경할 수 있어야합니다.

<div id="dvMainNavMenu"> 
     <ul id="NavItem"> 
     <li>Nav Item</li> 
      <li>Nav Item</li> 
      <li>Nav Item</li> 
     </ul> 
    </div> 

#NavItem li {background-color: transparent; text-decoration: none; } 
#NavItem li:hover {background-color: #ff8700;} 
#NavItem li:focus {background-color: #ff8700;} 

초점이 작동하지 않는 경우는, (누군가가 나를 도울 수

Answer 1

이 가능하며, 너무 오래가 아닌 대화 형 요소 (대화 형 요소가 input, select, a 같은 그 것을 실현으로?. ..)는 초점을 맞출 수 없습니다. 은 :active 가상 클래스에 응답하지만 마우스를 놓으면 지속됩니다 (마우스를 움직이면 기본 동작 인 선택에 의해 무시됩니다) :

#NavItem li {background-color: transparent; text-decoration: none; } 
#NavItem li:hover {background-color: #ff8700;} 
#NavItem li:active {background-color: #f00;} 

JS Fiddle demo.

CSS는 프레젠테이션에 사용된다는 점을 기억해야합니다. 자바 스크립트는 HTML에 의해 제공되는 콘텐츠 상단에 기능/행동/상호 작용 레이어로 사용됩니다 (예 : dart 등).

JavaScript를 사용하는 은 (는)의 형태로 '부정 행위'가 아닙니다. 입력하지 않거나 "초점 - 가치"

Answer 2

요소는 [©/™/등.] CSS가 제공하는 :focus, :active 등 의사 클래스를 인정하지 않을 수 있습니다. 앵커 (<a>)를 사용하여 해킹 할 수 있지만 이제는 href 타겟을 제공하고 자바 스크립트를 사용하지 않고 이름이 지정된 앵커/일치 ID로 창을 스크롤하거나 해킹하려고 시도 할 것입니다. <a>을 사용하는 다른 효과가있을 수 있습니다. 그리고 href이 없으면 많은 고유의 능력을 잃어 버리게됩니다.

작은 자바 스크립트는 여전히 (상대적으로) 경량 인 동안 당신이 쫓고있는 것을 정확히 수행 할 수 있습니다. 그리고 최악의 시나리오 인 경우 자바 스크립트를 지원하지 않거나 사용 중지 된 브라우저는 :hover 능력 만 사용하도록 폴백합니다. 그런 다음

#NavItem .active { background-color: #FF8700; } 

:

클래스 만들기 :

var ul = document.getElementById('NavItem'); 
if (ul){ 
    var li = ul.getElementsByTagName('li'); 
    for (var i = 0; i < li.length; i++){ 
     li[i].onclick = function(e){ 
      var re = /\b(active)\b/; 
      if (this.className.test(re)){ 
       this.className = this.className.replace(re,'').replace(/^\s+$/,''); 
      }else{ 
       this.className += ' active'; 
      } 
     } 
    } 
} 

를 또는, 좋은 jQuery를 방법 :

$('#NavItem li').click(function(e){ 
    $(this).toggleClass('active'); 
}); 

Answer 3

그와

, 여기에 자바 스크립트 대안이다 당신이 링크와 조합 된 :target pseudo-class 부정적인 점은 한 번에 하나씩 만 강조 표시 할 수 있다는 것입니다. 매우 거친 데모 인 check out this jsFiddle 또는 아래 HTML/CSS보기.

는

<div id="dvMainNavMenu"> 
     <ul id="NavItem"> 
     <li><a href="#item1" id="item1">Nav Item</a></li> 
     <li><a href="#item2" id="item2">Nav Item</a></li> 
     <li><a href="#item3" id="item3">Nav Item</a></li> 
     </ul> 
    </div> 

#NavItem li {background-color: transparent; text-decoration: none; } 
#NavItem li:hover {background-color: #ff8700;} 
#NavItem li:focus {background-color: #ff8700;} 
#NavItem li a { display:block; } 
#NavItem li a:target { background-color:black; } 

이것은 분명히 특정 시나리오에서 작동 것이다, 그래서 나 당신이하고 it's not universal browser support (IE9 and up)하려고하는 것과 맞지 않을 수 있습니다.