CSS 隐藏/显示效果适用于 Firefox，但不适用于 Chrome/Safari

Question

我正在研究 CSS 隐藏/显示效果。它在 Firefox 上运行良好。你点击它，Hello World 文本就会出现。然后你再次点击，它就消失了。

但在 Chrome/Safari 上，您必须点击并按住按钮才能使其显示。

如何让它在 Chrome/Safari 上像在 Firefox 上一样正常工作？

这里是jsfiddle。

HTML：

<div class="formatting_show" id="formatting_show"></div>

<span id="formatting_content"> Hello World </span>

CSS：

#formatting_show {
    cursor: pointer; 
    cursor: hand;
    float: right;
    font-size: 30px;
    height: 15px;
    text-align: right;
    width: 74px;
    color: #000;
}

#formatting_content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
#formatting_show:before {
    content: "Formatting «"
}
#formatting_show:active.formatting_show:before {
    content: "Formatting »"
}
#formatting_show:active ~ span#formatting_content {
    font-size: 30px;
    height: 70px;
    opacity: 1;
}

#formatting_content {
    float: left;
}

Answer 1

我同意@Huangism 在评论中写道，:active 伪类不可能做到这一点。但是，您可以使用 HTML 复选框、该复选框的 标签 和 CSS 中的 general sibling selector (see also)。

这是所有的 HTML 代码：

<input  id="formatting_show" type="checkbox" />
<label for="formatting_show">Formatting</label>

<div class="formatting_content">Hello World</div>

以及完整的 CSS 代码：

#formatting_show {
    display: none;
}
.formatting_content {
    display: none;
}
#formatting_show:checked ~ .formatting_content {
    display: block;
}

你可以看看a running example。