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.


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

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




      showForm : function (component,event,helper){

            document.getElementById('loginForm').style.display = "block";


2 Answers 2


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.

  • could you please update my javascript for applying hover functionality,because i'm little confuse to apply
    – siva
    Aug 1, 2017 at 15:30
  • 1
    No - the documentation from w3.org should provide you with the information you need, if you do not understand, you should go back to reading the basics. If you did not code the above and are trying to get someone to do the job for you, well, this is not the best place to do so. Additionally, there are plenty of resources online to help you understand what you are attempting.
    – glls
    Aug 1, 2017 at 15:33
  • @siva, please take some time to read How to Ask and take the tour to get familiar with the SFSE forum.
    – glls
    Aug 1, 2017 at 15:37

You can do it with CSS only

.THIS .loginForm{
  visibility: hidden;
.THIS.login:hover .loginForm{
    visibility: visible;
  • 2
    Although you are providing an alternative or proposing the user switch to using CSS, it fails to answer why the mouseover functionality is not working in their lightning component. Also, it fails to educate the user on their mistake(s) and does not provide any explanation on why this solution works and how to implement it...
    – glls
    Aug 1, 2017 at 21:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .