如何讓這個編碼在谷歌瀏覽器中運行？

所以我最近發現了一個純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中正確顯示，而不僅僅是一個閃存？

來源

2013-11-23 user3024230

試試這個：在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>

來源

2013-11-23 06:36:07

編輯：它的偉大工程，我擺弄錯，但它的工作原理，謝謝！ – user3024230

編輯：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/

來源

2013-11-23 06:46:40

如何讓這個編碼在谷歌瀏覽器中運行？

回答

相關問題