如何让这个编码在谷歌浏览器中工作？答案

【问题标题】：How do I get this coding to work in Google Chrome?如何让这个编码在谷歌浏览器中工作？
【发布时间】：2013-11-23 06:20:40
【问题描述】：

所以我最近发现了一个纯粹的 css 剧透代码。它在 FF (FireFox) 中运行良好，但在 Google Chrome 中完全消失。代码如下：

<style type="text/css">
.spoiler { background: #000000; color: #ffffff; width: 500px; padding: 40px; }
.spoilerbutton:focus, .spoiler { display: none; }
.spoilerbutton:focus + .spoiler { display: block; }
</style>

<input class="spoilerbutton" type="button" value="Hidden">
<div class="spoiler">
Well hello!
</div>

我知道它只是 CSS，那是因为我还没有学过 jQuery 或 Javascript。谁能解决这个问题，让它在 Chrome 中正确显示，而不仅仅是一个闪光灯？

【问题讨论】：

标签： html css google-chrome button input

【解决方案1】：

试试这个：在 Chrome 31 中测试。FF 24，IE 11

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .spoiler { 
            background: #000000; 
            color: #ffffff; 
            width: 500px; 
            padding: 40px; 
            display: none; 
        }
        .spoilerbutton:focus + .spoiler { display: block; }
    </style>
</head>
    <body>
        <input class="spoilerbutton" type="button" value="Hidden">
        <div class="spoiler">Well hello!</div>
    </body>
</html>

【讨论】：

编辑：效果很好，我弄错了，但它有效，谢谢！

【解决方案2】：

编辑：nvm 我猜我最初的假设是错误的，删除它。当前的最佳答案看起来更正确，但留下了其他选择。

.spoilerbutton:focus, .spoiler { 
    display: none; 
}

.spoilerbutton:hover + .spoiler,
.spoilerbutton:focus + .spoiler { 
    display: block; 
}

或者你可以做这样的事情 http://jsfiddle.net/arevak/g4d54/

或者你可以像 reddit http://jsfiddle.net/arevak/LdKSS/

【讨论】：