Question

我正在为一个学校工作做一个网页，我正在尝试做一个按钮，当你点击它时弹出然后当你再次点击它时会弹出。按住登录按钮的按钮应该隐藏整个表单，直到我将鼠标悬停在它上面，然后点击登录（瑞典语中的“logga”）......

但表格显示了整个时间......

有些代码是瑞典语，但无论如何都不重要。

HTML5：

    <!DOCTYPE html>
    <html>
        <head>
  <link rel="stylesheet" type="text/css" href="loggaIn.css">
  <link rel="stylesheet" type="text/css" href="Stylesheet_spelnord.css">
  <link rel="stylesheet" type="text/css" href="knapp.css">
  <script src="loggain.js"></script>
    <meta charset="utf-8"/>
        <title>Spelnörd</title>
        </head>
        <body>
                <header id="top_bg">
                    <h1 id="titel"> Spelnörd</h1>           
                </header>
<div class='hexagon'>
  <ul>
    <li class='polygon_top' id="toggle-login">
      <a href="#">Logga in
      <div id="login">
  <div id="triangle"></div>
  <h1>Log in</h1>
  <form>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <input type="submit" value="Log in" />
  </form>
</div></a>      
    </li>
    <li class='polygon_top'></li>
    <li class='polygon_top'>
      <a href="#">Dribbble</a>
    </li>
    <li class='polygon_bottom'>
      <a href="#">Forrst</a>
    </li>
    <li class='polygon_bottom'></li>
    <li class='polygon_bottom'>
      <a href="#">Twitter</a>
    </li>
  </ul>

</div>
    </body>
    </html>

按钮的CSS：

a {
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

li {
  list-style-type: none;
}

/*=================================== container 
*/

.hexagon {
  position: absolute;
  top: 24.5%;
  left: 15%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  transform-origin: center;
  transform: scale(1.00005); 
}

/*=================================== top and bottom triangle
*/

.polygon_top,
.polygon_bottom {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  position: absolute;
  width: 0;
  height: 0;
  transition: width 0.3s ease-in-out, border 0.1s linear, border-radius 0.5s ease-in-out;
}

.polygon_top a,
.polygon_bottom a {
  color: rgba(55, 55, 55, 0);
  display: block;
  font-size: 0em;
  text-transform: uppercase;
  width: 100%;
  transition: color, font-size 0.3s;
}

.polygon_top:nth-child(1),
.polygon_top:nth-child(3),
.polygon_bottom:nth-child(4),
.polygon_bottom:nth-child(6) {
  cursor: pointer;
}

.polygon_top:nth-child(1):hover > a,
.polygon_top:nth-child(3):hover > a,
.polygon_bottom:nth-child(4):hover > a,
.polygon_bottom:nth-child(6):hover > a {
  color: #373737;
  font-size: 1em;
}

.polygon_top:nth-child(1) {
  border-bottom: 30px solid #E56717;
  right: 0;
  transform: translateX(-30px) translateY(-15px);
}

.polygon_top:nth-child(1):hover {
  border-radius: 4px 0 0 4px;
  border-left: 18px solid #E56717;
  width: 120px;
  z-index: 100;
}
.polygon_top:nth-child(1) > a {
  line-height: 30px;
}

.polygon_top:nth-child(2) {
  border-bottom: 30px solid #E56717;
  transform: translateX(12px) translateY(15px);
}

.polygon_top:nth-child(3) {
  border-bottom: 30px solid #E56717;
  left: 0;
  transform: translateX(30px) translateY(-15px);
}

.polygon_top:nth-child(3):hover {
  border-radius: 0 4px 4px 0;
  border-right: 18px solid #E56717;
  width: 120px;
  z-index: 100;
}

.polygon_top:nth-child(3) > a {
  text-align: right;
  line-height: 30px;
}

.polygon_bottom:nth-child(4) {
  border-top: 30px solid #565051;
  right: 0;
  transform: translateX(-30px) translateY(15px);
}

.polygon_bottom:nth-child(4):hover {
  border-radius: 4px 0 0 4px;
  border-left: 18px solid #565051;
  width: 120px;
  z-index: 100;
}

.polygon_bottom:nth-child(4) > a {
  text-align: left;
  line-height: 30px;
  margin-top: -30px;
}

.polygon_bottom:nth-child(5) {
  border-top: 30px solid #565051;
  transform: translateX(12px) translateY(-15px);
}

.polygon_bottom:nth-child(6) {
  border-top: 30px solid #565051;
  transform: translateX(30px) translateY(15px);
}

.polygon_bottom:nth-child(6):hover {
  border-radius: 0 4px 4px 0;
  border-right: 18px solid #565051;
  width: 120px;
  z-index: 100;
}

.polygon_bottom:nth-child(6) > a {
  text-align: right;
  line-height: 30px;
  margin-top: -30px;
}

表单的CSS：

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

  #login{
  width:400px;
  margin:0 auto;
  margin-top:8px;
  margin-bottom:2%;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}

#triangle{
  width:0;
  border-top:12x solid transparent;
  border-right:12px solid transparent;
  border-bottom:12px solid #3399cc;
  border-left:12px solid transparent;
  margin:0 auto;
}

#login h1{
  background:#3399cc;
  padding:20px 0;
  font-size:140%;
  font-weight:300;
  text-align:center;
  color:#fff;
}

form{
  background:#f0f0f0;
  padding:6% 4%;
}

input[type="email"],input[type="password"]{
  width:92%;
  background:#fff;
  margin-bottom:4%;
  border:1px solid #ccc;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}

input[type="submit"]{
  width:100%;
  background:#3399cc;
  border:0;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:100%;
  color:#fff;
  cursor:pointer;
  transition:background .3s;
  -webkit-transition:background .3s;
}

input[type="submit"]:hover{
  background:#2288bb;
}

klick功能的Javascript：

$('#toggle-login').click(function(){
  $('#login').toggle();
});

Answer 1

尝试包含jquery，然后是你的javascript代码，并将其添加到body标签的末尾...

    <body>
    ....
    some html here ....
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#toggle-login').click(function(){
                $('#login').toggle();
            });
        });
        </script>
    </body>

登录表单不会消失

1 个答案: