Html 我如何让这种编码在谷歌浏览器中工作？_Html_Css_Google Chrome_Button_Input

Html 我如何让这种编码在谷歌浏览器中工作？

html css google-chrome button input

Html 我如何让这种编码在谷歌浏览器中工作？,html,css,google-chrome,button,input,Html,Css,Google Chrome,Button,Input,所以我最近发现了一个纯粹的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 +

所以我最近发现了一个纯粹的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>


.spoiler{背景：#000000；颜色：#ffffff；宽度：500px；填充：40px；}
.sporterbutton:focus，.sporter{display:none；}
.sporterbutton:focus+.sporter{display:block；}
你好！

我知道这只是CSS，那是因为我还没有研究过jQuery或Javascript。有人能修复这个问题，使它在Chrome中正确显示，而不仅仅是一个闪光灯吗？

试试这个：在Chrome 31中测试。FF 24，即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>


.扰流板{
背景：#000000；
颜色：#ffffff；
宽度：500px；
填充：40px；
显示：无；
}
.sporterbutton:focus+.sporter{display:block；}
你好！

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

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

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

或者你可以这样做

或者你也可以像reddit一样

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