：CSSを2度クリックすると、CSSに焦点が当てられます

私が見つけたこのページを試しています。 hrefのページ遷移です。しかし、フォーカスしているときにナビゲーションの色を変更したい。そして：CSSに焦点が唯一それが二回クリックすると動作します...ここでは、私がどこかからもらったコードです...：CSSを2度クリックすると、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

は、もともと私は、今、私は私がそう信じて、質問を理解していませんでしたそのようなことをするには、のボタンをラベルにバインドするためにhtmlを使用して、toggledのテキストを変更することができます。あなたはjavascriptを使わずにこれを行うことができます（ただし、読んでください）。また、htmlはlabel（<label>）の中にanchor（<a>）を持ちますが、逆転（labelはanchorの中にありません）が有効ではありません。私はlabel内anchorをラップするとき

、少なくともこの場合には、labelが正しく適切に基礎となるradioをトグルしません。そのため、私はlabelsにいくつかのインラインonclickイベントを入れ、正しく動作します。私はあなたが次の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); 
}

参照を追加することによってそれを行うことができ、この作業を取得するために、チェックボックスやラジオのハックを適用する必要はありません実現してきました

UPDATE

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を2度クリックすると、CSSに焦点が当てられます

答えて

関連する問題