上記のリンクをクリックすると、私が作成したいものの例が表示されます。しかし今、私はこの例を採用しようとしています。しかし、それは機能しません。
HTMLドキュメント、CSSドキュメント、JavaScriptドキュメントを作成します。例のコードを正しいドキュメントにコピーします。すべてが機能するはずです。しかし、そうではありません。
私は何が間違っているのですか?
バブルは機能しません。表示されないだけです。
上記のリンクをクリックすると、私が作成したいものの例が表示されます。しかし今、私はこの例を採用しようとしています。しかし、それは機能しません。
HTMLドキュメント、CSSドキュメント、JavaScriptドキュメントを作成します。例のコードを正しいドキュメントにコピーします。すべてが機能するはずです。しかし、そうではありません。
私は何が間違っているのですか?
バブルは機能しません。表示されないだけです。
私が言ったように、JavaScriptで言及するIDを含むHTMLの下に配置する必要があります
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
.pw-hint{
display:none;
position: absolute;
border: 1px solid #999;
-webkit-border-radius: 5px;
background-color:#EEE;
color:black;
max-width:300px;
font-size: 14px;
padding:5px;
margin-top:22px;
}
.pw-hint:after {
/*http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/*/
content: "";
position: absolute;
top: -20px;
left: 10px;
border-bottom: 20px solid black;
border-bottom-color: #EEE;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.pw-hint h2{
font-size:20px;
color:#D31515;
}
</style>
</head>
<body>
<a href="#" id="link">click here</a>
<div class='pw-hint' id="hint"><h2>Warning!</h2> Lorem ipsum bla bla</div>
<script>
document.getElementById("link").addEventListener("click", clicked);
function clicked(){
document.getElementById("hint").style.display = "block";
}
</script>
</body>
</html>