html - Does using CSS hover affect Jquery on(click) -

html - Does using CSS hover affect Jquery on(click) -

i not sure why isn't working. created hidden menu element when roll on it, display contents login , register button should trigger lightbox form.

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>"); }); }

does using css :hover alter display settings not allow me utilize $('#loginbut') selector?

jquery html css dom