Question

我无法理解如何制作类似于此网站的内容：__smashingmagazine.com

如果你调整窗口大小，搜索将使用一个按钮。所以...尝试点击此搜索图标...新的div将显示搜索输入。并注意它的行为：无论你接下来要做什么，这个div都不会隐藏它自己，但只有当你点击'x'而不是搜索图标...这是纯粹的CSS，对吧？！怎么可能...... 我找到了这篇文章： Click here

但行为非常非常不同......我完全不喜欢它。

知道如何让它像上面的网站一样工作吗？什么都可以帮助！

谢谢！

Answer 1

Smashing Magazine中的示例使用:target psuedo类在单击锚点时更改元素的CSS。这是对他们如何实现这种行为的简化细分。

锚被配置为在URL中设置片段标识符，对于Smashing Magazine，这是#ms。有这样一个锚：

<a href="#ms">Search</a>

单击片段标识符设置为#ms后，他们会使用此标识使用:target psuedo类进行搜索。

#ms {
    display: none;
}
#ms:target {
    display: block;
}

当片段标识符设置为#ms时，激活：目标样式，显示搜索。

以下是一个简单示例：http://jsfiddle.net/we76L66h/

他们正在使用:target与子项（#ms:target + div.example）来更改目标元素中子项的样式。这就是他们如何让按钮变为＆＃34; close＆＃34;设置#ms片段标识符时按钮。