div를 포커스/활성 상태로 유지하는 Psuedo-class?

사용자가 링크를 클릭 할 때까지 숨겨진 div가 있습니다. 선택기를 사용하면 div가 표시됩니다. div를 볼 수있게 유지하려면 div:active, div:focus이 있어야합니다.div를 포커스/활성 상태로 유지하는 Psuedo-class?

div를 표시하는 것은 충분히 간단하지만 표시 상태를 유지하는 것은 내가 가진 문제입니다. div를 클릭하면 (링크에서 활성 상태로 전환하고 div에 포커스/활성 상태로 놓음) div가 다시 사라집니다.

나는 div:hover을 사용해 보았지만 div를 표시 한 후에도 (내가 클릭 한 후에도) div가 사라져도 여전히 사라집니다. :active 및 :focus이 내 div에 적용되지 않는 이유는 무엇입니까?

예 : 대신 :target pseudoclass를 사용하여, 다른 접근 방식을 취할 수 http://jsfiddle.net/pJWPE/

출처

2012-07-31 Richard Parnaby-King

. 이것을 설명하는 가장 좋은 방법은 예제입니다 :

#box { 
 
    display: none; 
 
} 
 
#box:target { 
 
    display: block; 
 
}

<a href="#box">Open</a> <a href="#">Close</a> 
 

 
<div id="box">content</div>

경고,이 예를 들어 어떤지 브라우저 지원 모르겠어요. 내 Chrome 버전에서 작동합니다.

출처

2012-07-31 09:41:17

이유 : 활성 : 내 div에 포커스가 적용되지 않습니까?

6.6.1.2 :

때문에 :active 및 :focus 몇 가지 제한이 있습니다. 사용자 동작 가상 클래스 : 호버, 활성 및 포커스 :

대화 형 사용자 에이전트는 사용자 동작에 따라 렌더링을 변경하는 경우가 있습니다. 선택기는 사용자가 작업중인 요소를 선택하기위한 3 가지 의사 클래스를 제공합니다.

가상 클래스는 요소가 사용자에 의해 활성화되는 동안 적용됩니다. 예를 들어, 사용자가 마우스 버튼을 눌러 놓은 시간 사이에. 두 개 이상의 마우스 버튼이있는 시스템에서 : active는 기본 또는 기본 활성화 버튼 (일반적으로 "왼쪽 마우스"버튼) 및 해당 별칭에만 적용됩니다.

가상 클래스는 요소에 포커스가있는 동안 적용됩니다 (키보드 또는 마우스 이벤트 또는 다른 형식의 입력을 허용 함).

문서 언어 또는 구현 요소 :active 될 또는 :focus을 획득 할 수있는 특정 제한이있을 수 있습니다.

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos

<div>

입력 어떠한 형태 아니다 ( <textare>, <input>, ...) 나 interactive element (등 <a>, <audio>, <video>). 그것은 단지 컨테이너입니다. :focus이나 :active도 적용되지 않습니다.

대신 suggested by Casey으로 :target을 사용하십시오.

출처

2012-07-31 09:44:58 Zeta

컨텍스트는 하위 메뉴가 포함 된 메뉴로 관련 메뉴를 클릭하면 표시되고 링크를 클릭하는 동안 계속 표시됩니다. (당신과 아주 비슷합니다).

HTML 마크 업 :

파이어 폭스 & 크롬 웹 브라우저를

<nav> 
    <ul> 
     <li> 
      <a href="#" > 
      </a> 
      <div> 
       <ul> 
        <li> 
         <a href="/sites/p1.php">submenu link1</a></li> 
        <li> 
         <a href="/sites/p2.php">submenu link2</a></li> 
        <li> 
         <a href="/sites/p3.php">submenu link3</a></li> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</nav>

, 나는 personnally 사용

nav > ul > li > a:focus + div, nav > ul > li > a + div:active { 
    display : block; 
}

첫 번째 선택 참조를 내 링크 앵커에있는 하위 메뉴 쇼 때를 얻기 위해 클릭/탭 선택. 두 번째는 링크를 클릭 할 때 하위 메뉴 div를 열어 두는 것입니다 (활성 div를 계속 표시 함).

이 기능은 저에게 도움이되지만 은 IE 용으로 불행합니다..

출처

2015-02-03 08:47:31 Alex

div를 포커스/활성 상태로 유지하는 Psuedo-class?

답변

관련 문제