-4

http://jsfiddle.net/GxuqQ/

如果您单击上面的链接，您将看到我想要创建的示例。但现在我正试图采用这个例子。但它不起作用。

我创建了一个 HTML 文档、一个 CSS 文档和一个 JavaScript 文档。我将示例中的代码复制到正确的文档中。一切都应该工作。但事实并非如此。

我究竟做错了什么？

泡沫不起作用。它只是没有出现。

4

1 回答 1

3

就像我说的，您必须将其放在包含您在 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>
于 2012-08-31T19:17:47.987 回答