Question

我正在研究CSS隐藏/显示效果。它适用于Firefox。单击它，会出现Hello World文本。然后再次单击，它就会消失。

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

如何让它在Chrome / Safari上正常运行，就像在Firefox上一样？

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复选框，标签用于该复选框，general sibling selector用于CSS（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。

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

1 个答案: