html - 单击时显示隐藏文本

Question

我试图在点击我的价格板 block 时显示文本。然而，什么也没有发生。

我的 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;
}

现在，active 伪类起作用了，当我点击它时，我的字体颜色变成黑色。然而，当我点击同一个地方时，我的文字没有显示。

我做错了什么？

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>