Question

所以我最近发现了一个纯粹的css剧透代码。它在FF（FireFox）中运行良好，但在谷歌浏览器中完全痉挛。这是代码：

<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中正确显示并且不仅仅是闪光灯吗？

Answer 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>

Answer 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/

如何在Google Chrome中使用此编码？

2 个答案: