ボタンを表示するテキスト

Question

私は自分のウェブサイトにいくつかのトランジション・テキストを作成しようとしていますが、ボタンをクリックしてテキストをトランジションしようとしています。私はdivタグでこれを行うことができますが、特定の要素では、私はできません。今、私はそれがあるためだと想像

<button class="btn btn-primary" id="hidetext"> 
    Setup Info 
</button> 

：

だからここに私のHTMLコードです：

<div class="infoLinks centerlinks"> 
    <div class="col-xs-12 col-md-12 tips" id="hidetext"> 
     <button class="btn btn-primary"> 
      Setup Info 
     </button> 
     <ul > 
      <li> 
       <a href="{{var protoHost}}img/NETGEARSetup.pdf" target="_blank" class="showtext">How to setup your Netgear Wireless Router</a> 
      </li> 
      <li> 
       <a href="{{var protoHost}}img/DSLSetup.pdf" target="_blank" class="showtext">How to setup your DSL/CABLE Internet</a> 
      </li> 
      <li> 
       <a href="{{var protoHost}}img/VoIPSetup.pdf" target="_blank" class="showtext">How to setup your Internet with VoIP Phone</a> 
      </li> 
     </ul> 
    </div> 
</div> 

そして、ここに私のCSSです：私は、ボタンのコードを変更したときに今

#hidetext .showtext { 
    color: #ffffff; 
    -webkit-transition: color .75s ease-in; 
    -moz-transition: color .75s ease-in; 
    -o-transition: color .75s ease-in; 
    -ms-transition: color .75s ease-in; 
    transition: color .75s ease-in; 
} 
#hidetext:hover .showtext{ 
    color: #000000; 
} 

私のボタンは私のテキストと同じ要素にありません。

どうすればこの問題を解決できますか？ありがとう。

Answer 1

完全にCSSソリューション。隠したcheckboxを使用してクリック数を確認できます。 labelタグは、ボタンとしてスタイリングすることができます。クリックすると実際にcheckboxがチェックされ、チェックが外されます。 CSS ~セレクタを使用すると、兄弟を選択して、チェックした状態とチェックしていない状態の両方に従って兄弟をスタイルできます。

#clicker{ 
 
    display:none; 
 
} 
 
input#clicker ~ ul .showtext { 
 
    color: #ffffff; 
 
    -webkit-transition: color .75s ease-in; 
 
    -moz-transition: color .75s ease-in; 
 
    -o-transition: color .75s ease-in; 
 
    -ms-transition: color .75s ease-in; 
 
    transition: color .75s ease-in; 
 
} 
 
input#clicker:checked ~ ul .showtext { 
 
    color: #000000; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="infoLinks centerlinks"> 
 
    <div class="col-xs-12 col-md-12 tips"> 
 
     <input type="checkbox" id="clicker" /> 
 
     <label for="clicker" class="btn btn-primary" id="hidetext"> 
 
      Setup Info 
 
     </label> 
 
     <ul > 
 
      <li> 
 
       <a href="{{var protoHost}}img/NETGEARSetup.pdf" target="_blank" class="showtext">How to setup your Netgear Wireless Router</a> 
 
      </li> 
 
      <li> 
 
       <a href="{{var protoHost}}img/DSLSetup.pdf" target="_blank" class="showtext">How to setup your DSL/CABLE Internet</a> 
 
      </li> 
 
      <li> 
 
       <a href="{{var protoHost}}img/VoIPSetup.pdf" target="_blank" class="showtext">How to setup your Internet with VoIP Phone</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 2

あなたがCSSを書いたやり方では、ブラウザはID hidetext内の要素を検索します。したがって、hidetextのIDを削除すると、コードは正常に動作するはずです。