Question

我不确定为什么这不起作用。我创建了一个隐藏的菜单元素，当你滚动它时，它将显示其内容，这是一个登录和注册按钮，应触发灯箱形式。

HTML

<div id='container'>
  <div id='menu'>
     <div class='inputBut' id='loginBut'>Login</div>
     <div class='inputBut' id='regBut'>Register</div> 
  </div>

CSS

/*--------- Menu -----------------*/

  #menu {
    z-index:10;
    position: absolute;
    width: 100%;
    height: 4%;
    transition: height 0.125s ease;
    background-color: black;
  }

  #menu:hover {
    height: 10%;
  }

  #menu:hover .inputBut{
    color: white;
    display: inline-block;
  }

  .inputBut{
    display: none;
    position: relative;
    top: 30%;
    border: solid 2px white;
    border-radius: .5em;
    width:4em;
    padding-left:2em;
    padding-right: 2em;
    text-align: center;
  }

/*-------------------- form styling ------------------*/
.lightBox{
  z-index: 100;
  background-color: rgba(10,10,10,.9);
  height: 100%;
  width:100%;
  position: absolute;
  top: 0;
  left: 0;
}

JS

 <script>
$(document).ready(init);

function init(){
  login();
}


function login(){
  $("#loginBut").click(function(){
    $("#container").append("<div class='lightBox closeBox'><form id='loginForm'><input type='text' id='email'/><input type='text' id='password'><input type='submit'></form></div>");
  });
}

使用css：hover更改显示设置是不是让我使用$（'＃loginBut'）选择器？

是否使用CSS悬停效果Jquery（单击）

0 个答案: