隠し文字を表示オン - クリック

Question

価格タイルをクリックしたときにテキストを表示しようとしています。しかし、何も起こらない。

マイHTML：

<div class="col-xs-12 col-md-4"> 
    <div class="priceTile pricebodytest"> 
     <div class="priceBody"> 
      <p align="center">FTTN 50</p> 
      <ul> 
       <li>50 Mbps Download</li> 
       <li>150 GB Data Usage</li> 
      </ul> 
      <h3>\$48.99<span>Per Month</span></h3> 
     </div> 
    </div> 
</div> 
<span class="invisibletext">Test</span> 

マイCSS：

.priceTile{ 
    background-color: #007dd1; 
    color: white; 
    margin: 8px 8px 8px 8px; 
    padding: 4px; 
    box-shadow: 1px 1px 2px 1px grey; 
    padding-top: 24px; 
    position: relative; 
    top: -24px; 
    left:0; 
    border-radius: 15px; 
} 
.priceBody ul{ 
    list-style-type: none; 
    font-size: 1.1em; 
    font-weight: bold; 
    line-height: 1.7em; 
} 
.priceBody h3{ 
    padding-left: 16px; 
    margin-bottom: 24px; 
    font-size: 2.5em; 
    font-weight: bold; 
} 
.priceBody h3 span{ 
    margin-left: 8px; 
    font-size: .6em; 
} 
.priceBody p{ 
    margin-left: 6px; 
    font-size: 1.3em; 
    font-weight: bold; 
    text-align: center; 

} 
.priceBody p span{ 
    color: #66CCFF; 
    line-height: 1.2em; 
    font-weight: 700; 
} 
.invisibletext { 
    display: none; 
} 
.pricebodytest:active { 
    color: black; 
} 
.pricebodytest:active .invisibletext { 
    display: inline-block; 
} 

今

、アクティブな疑似クラスの作品、と私はそれをクリックしたときに、私のフォントの色が黒くなります。しかし、同じ場所をクリックすると、テキストが表示されません。

私は間違っていますか？

Answer 1

あなたのHTMLは、このように変更する必要があります。

<div class="col-xs-12 col-md-4"> 
    <div class="priceTile pricebodytest"> 
     <div class="priceBody"> 
      <p align="center">FTTN 50</p> 
      <ul> 
       <li>50 Mbps Download</li> 
       <li>150 GB Data Usage</li> 
      </ul> 
      <h3>\$48.99<span>Per Month</span></h3> 
     </div> 
     <span class="invisibletext">Test</span> 
    </div> 

</div>