this is my lightning component for showing a login form after hovering the cursor on login button.
But my javascript isn't working properly. Login button is displayed at output but login form is not displayed.
Component:
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<!--use bootstrap css and jQUERY file in lightning component by using ltng:require component-->
<ltng:require styles="{! $Resource.boostrap337 + '/bootstrap-3.3.7-dist/css/bootstrap.min.css'}"
scripts="{!join(',',$Resource.jquery224 ,$Resource.boostrap337 + '/bootstrap-3.3.7-dist/js/bootstrap.min.js')}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
<!--To ensure proper rendering and touch zooming using below meta tag-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<form>
<p class ="login" mouseover ="{!c.showForm}">
<span class="label">Login Here</span> <br/>
<span class="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span><br/>
<span class="form-field"><input type="name" /></span> <br/> </span>
<span class="form-elements">
<span class="form-label">Password:</span><br/>
<span class="form-field"><input type="password" /></span> <br/> </span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
</aura:component>
Javascript:
({
showForm : function (component,event,helper){
document.getElementById('loginForm').style.display = "block";
},
})