: 두 번 클릭하면 CSS에 초점이 맞춰집니다.

나는 내가 발견 한이 페이지를 실험 해 왔습니다. 이것은 href에 대한 페이지 전환입니다. 그러나 포커스가있을 때 내 탐색의 색상을 변경하고 싶습니다. 그리고 : CSS에 초점은이: 두 번 클릭하면 CSS에 초점이 맞춰집니다.

<html> 
<head> 
<style> 

a.clicked:focus{ 
    color:red; 
} 
html,body { 
     width: 100%; 
     height: 100%; 
     position: relative; 
} 
body { 
    overflow: hidden; 
} 

header { 
    background: #fff; 
    position: fixed; 
    left: 0; top: 0; 
    width:100%; 
    height: 3.5rem; 
    z-index: 10; 
} 

nav { 
    width: 100%; 
    padding-top: 0.5rem; 
} 

nav ul { 
    list-style: none; 
    width: inherit; 
    margin: 0; 
} 


ul li:nth-child(3n + 1), #main .panel:nth-child(3n + 1) { 
    background: rgb(0, 180, 255) ; 
} 

ul li:nth-child(3n + 2), #main .panel:nth-child(3n + 2) { 
    background: rgb(255, 65, 180) ; 
} 

ul li:nth-child(3n + 3), #main .panel:nth-child(3n + 3) { 
    background: rgb(0, 255, 180) ; 
} 

ul li { 
    display: inline-block; 
    margin: 0 0px; 
    margin: 0 0rem; 
    padding: 0px 0px; 
    padding: 0.3rem 0.5rem; 
    border-radius: 2px; 
    line-height: 1.5; 
} 

ul li a { 
    color: #fff; 
    text-decoration: none; 
} 

.panel { 
    width: 100%; 
    height: 700px; 
    z-index:0; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    -webkit-transition: -webkit-transform 0.6s ease-in-out; 
    transition: transform 0.6s ease-in-out; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 

} 

.panel h1 { 
    font-family: sans-serif; 
    font-size: 64px; 
    font-size: 4rem; 
    color: #fff; 
    position:relative; 
    line-height: 200px; 
    top: 20%; 
    text-align: center; 
    margin: 0; 
} 

/* 
*Scrolling 
*/ 
a[ id= "servicios" ]:target ~ #main article.panel { 
    -webkit-transform: translateY(0px); 
    transform: translateY(0px); 
} 

a[ id= "galeria" ]:target ~ #main article.panel { 
    -webkit-transform: translateY(-500px); 
    transform: translateY(-700px); 
} 
a[ id= "contacto" ]:target ~ #main article.panel { 
    -webkit-transform: translateY(-1000px); 
    transform: translateY(-1400px); 
} 



</style> 
</head> 
<body> 

<a id="servicios"></a> 
    <a id="galeria"></a> 
    <a id="contacto"></a> 
    <header class="nav"> 
     <nav> 
      <ul> 
       <li><a class="clicked" href="#servicios"> Servicios </a> </li> 
       <li><a class="clicked" href="#galeria"> Galeria </a> </li> 
       <li><a class="clicked" href="#contacto">Contacta nos </a> </li> 
      </ul> 
     </nav> 
    </header> 

    <section id="main"> 
     <article class="panel" id="servicios"> 
      <h1> Nuestros Servicios</h1> 
     </article> 

     <article class="panel" id="galeria"> 
      <h1> Mustra de nuestro trabajos</h1> 
     </article> 

     <article class="panel" id="contacto"> 
      <h1> Pongamonos en contacto</h1> 
     </article> 
    </section> 


</body> 
</html>

출처

2017-04-12 Winel Sutanto

원래 내가 질문을 이해하지 못했다 ... 두 번 ... 가 여기 어딘가에서받은 코드를 클릭 작동합니다, 지금은, 내가 생각 그래서 당신이 레이블을 radio 버튼을 바인딩하고 그들이 toggled 때 텍스트의 색상을 변경하려면 html을 사용할 수있는 그런 짓을. 당신은 자바 스크립트없이 이것을 할 수있다. label (<label>) 안에 anchor (<a>)을 포함하고 반전 (label은 anchor)이 아닌 유효한 html도 유효합니다.

은 적어도이 경우 나는 label 내부 anchor을 포장 할 때, label가 제대로 제대로 기본 radio을 전환하지 않습니다. 그래서 나는 labels에 인라인 onclick 이벤트를 넣었고 올바르게 작동합니다.

UPDATE 난 당신이 다음과 같은 CSS를

/* link color management */ 

header [href="#servicios"], 
a[id="galeria"]:target~header [href="#galeria"], 
a[id="contacto"]:target~header [href="#contacto"] { 
    color: rgb(255, 0, 0); 
} 

a[id="galeria"]:target~header [href="#servicios"], 
a[id="contacto"]:target~header [href="#servicios"] { 
    color: rgb(255, 255, 255); 
}

참조를 추가하여 작업을 수행 할 수 있습니다,이 작업을 얻을 수있는 체크 박스 또는 라디오 해킹을 적용 할 필요가 없습니다 깨달았다

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
body { 
 
    overflow: hidden; 
 
} 
 

 
header { 
 
    background: #fff; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 3.5rem; 
 
    z-index: 10; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    padding-top: 0.5rem; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    width: inherit; 
 
    margin: 0; 
 
} 
 

 
ul li:nth-child(3n + 1), 
 
#main .panel:nth-child(3n + 1) { 
 
    background: rgb(0, 180, 255); 
 
} 
 

 
ul li:nth-child(3n + 2), 
 
#main .panel:nth-child(3n + 2) { 
 
    background: rgb(255, 65, 180); 
 
} 
 

 
ul li:nth-child(3n + 3), 
 
#main .panel:nth-child(3n + 3) { 
 
    background: rgb(0, 255, 180); 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    margin: 0 0px; 
 
    margin: 0 0rem; 
 
    padding: 0px 0px; 
 
    padding: 0.3rem 0.5rem; 
 
    border-radius: 2px; 
 
    line-height: 1.5; 
 
} 
 

 
ul li a, 
 
.magic-label { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.panel { 
 
    width: 100%; 
 
    height: 700px; 
 
    z-index: 0; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-transition: -webkit-transform 0.6s ease-in-out; 
 
    transition: transform 0.6s ease-in-out; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.panel h1 { 
 
    font-family: sans-serif; 
 
    font-size: 64px; 
 
    font-size: 4rem; 
 
    color: #fff; 
 
    position: relative; 
 
    line-height: 200px; 
 
    top: 20%; 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 

 

 
/* 
 
*Scrolling 
 
*/ 
 

 
a[ id="servicios"]:target~#main article.panel { 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
} 
 

 
a[ id="galeria"]:target~#main article.panel { 
 
    -webkit-transform: translateY(-500px); 
 
    transform: translateY(-700px); 
 
} 
 

 
a[ id="contacto"]:target~#main article.panel { 
 
    -webkit-transform: translateY(-1000px); 
 
    transform: translateY(-1400px); 
 
} 
 

 

 
/* link color management */ 
 

 
header [href="#servicios"], 
 
a[id="galeria"]:target~header [href="#galeria"], 
 
a[id="contacto"]:target~header [href="#contacto"] { 
 
    color: rgb(255, 0, 0); 
 
} 
 

 
a[id="galeria"]:target~header [href="#servicios"], 
 
a[id="contacto"]:target~header [href="#servicios"] { 
 
    color: rgb(255, 255, 255); 
 
}

<a id="servicios"></a> 
 
<a id="galeria"></a> 
 
<a id="contacto"></a> 
 

 
<header class="nav"> 
 
    <nav> 
 
    <ul> 
 
     <li> 
 
     <a class="clicked" href="#servicios"> 
 
      Servicios 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a class="clicked" href="#galeria"> 
 
      Galeria 
 
      </a> 
 
     </li> 
 
     <li> 
 
     <a class="clicked" href="#contacto"> 
 
      Contacta nos 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 

 
<section id="main"> 
 

 
    <article class="panel" id="servicios"> 
 
    <h1> Nuestros Servicios</h1> 
 
    </article> 
 

 
    <article class="panel" id="galeria"> 
 
    <h1> Mustra de nuestro trabajos</h1> 
 
    </article> 
 

 
    <article class="panel" id="contacto"> 
 
    <h1> Pongamonos en contacto</h1> 
 
    </article> 
 
</section>

아래의 업데이트 snipplet

원래 대답내가 질문을 가장 가능성이 :hover 지시어를 사용하려면

을 이해하지 못했다,이 커서가 <a>

:focus 지시가 인 앵커 이상 언제가 될 것입니다 예를 들어 텍스트 상자에 커서가있을 때 포커스가 있습니다.

링크 포커스를 지정하는 방법은 탭 키를 사용하여 선택하는 것입니다.

출처

2017-04-12 17:55:16 Jpsh

하지만 페이지가 "활성"일 때 빨간색으로 유지하고 싶습니다. –

고마워 문제가 해결되었습니다! Btw 당신이 하나를 확인해 주시겠습니까 http://stackoverflow.com/questions/43423766/another-case-on-focus-must-be-clicked-twice (비슷한 문제이지만 다른 html 구조입니다) –

: 두 번 클릭하면 CSS에 초점이 맞춰집니다.

답변

관련 문제