mouseover functionality is not working in my lightning component?

Question

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

     },
})

Answer 1

There are several issues in your code, for starters, your class="loginForm" and you are trying to getElementById.

Additionally, mouseover is not a valid event, you have to use onmouseover.

and last but not least, unless you have stated this in your styling, your loginForm is displaying (display is not set to none) so no matter what, your form is always visible.

Answer 2

You can do it with CSS only

.THIS .loginForm{
  visibility: hidden;
}
.THIS.login:hover .loginForm{
    visibility: visible;
}