だから私は最近、純粋なcssスポイラーコードを発見しました。FF(FireFox)では正常に動作しますが、GoogleChromeでは完全に痙攣します。コードは次のとおりです。
<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で正しく表示され、単なるフラッシュではないようにすることはできますか?
これを試してください:Chrome 31でテスト済み。FF24、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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加