+ Start a Discussion
venkat bojjavenkat bojja 

How to do onMouseover in lightning component

Hi Team,

I am accessing the image in to my component  from the static resource. Now i want to implement the onMouseover event on that image.
When onMouseover on that image the background color should change to some other color.
Please help me on this. 
                                     Thanks in advance...
Code Snippet:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:layout >

                                    <lightning:layoutItem size="3" padding="around-small">
                                        <div >
                                            <img style="height: 500px;" src="/resource/Mouseover/" /></div>
                                            
                                        
                                    </lightning:layoutItem>
    </lightning:layout>
</aura:component>
===================================
Reference Image:

User-added image
Best Answer chosen by venkat bojja
sfdcMonkey.comsfdcMonkey.com
HI Venkat,
 try following code :
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:layout>
        <lightning:layoutItem size="3" padding="around-small">
            <div >
                <img aura:id="imgOver" class="" src="/resource/Mouseover/" onmouseover="{!c.UpdateColor}"  />
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

javaScript
({
    UpdateColor : function(component, event, helper){
        var img = component.find('imgOver');
          $A.util.addClass(img,'orangeColor');
    },
})
CSS
.THIS .orangeColor{
    background-color:orange;
}
Thanks, let us know if it helps you
http://sfdcMonkey.com




 

All Answers

Hemant_SoniHemant_Soni
Hi,
Please try below code.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:layout >

                                    <lightning:layoutItem size="3" padding="around-small">
                                        <div >
                                            <img onmouseover="{!c.UpdateColor}" aura:id="imgOver" Class="" style="height: 500px;" src="/resource/Mouseover/" /></div>
                                            
                                        
                                    </lightning:layoutItem>
    </lightning:layout>
</aura:component>
***************************** JS Controller ************************************
UpdateColor : function(component, event, helper){
var img = component.find('imgOver');
if($A.util.hasClass('RedColor',img)){
$A.util.removeClass('RedColor',img);
}else{
$A.util.addClass('RedColor',img);
}
}
*************************** CSS ********************************************
.THIS .RedColor{
background-color:red;
}
Thanks
venkat bojjavenkat bojja
Hi Hemant_Soni,
                            Thanks for your quick responce. I have implemented the same code what you are provided. But it is not working. So please once verify this and post me back.
                                              Thanks in adavance..

Reference Code:
=============================Component=====================================
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:layout >

                                    <lightning:layoutItem size="3" padding="around-small">
                                        <div >
                                            <img aura:id="imgOver" class="RedColor" style="height: 500px;" src="/resource/Mouseover/" onmouseover="{!c.UpdateColor}"  /></div>
                                         
                                    </lightning:layoutItem>
    </lightning:layout>
</aura:component>
=============================Controller.Js=====================================
({
    UpdateColor : function(component, event, helper){
var img = component.find('imgOver');
if($A.util.hasClass('RedColor',img)){
$A.util.removeClass('RedColor',img);
}else{
$A.util.addClass('RedColor',img);
}
}
})
===========CSS=================


.THIS .RedColor{
background-color:red;
}

Thanks
Venkat
 
sfdcMonkey.comsfdcMonkey.com
HI Venkat,
 try following code :
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:layout>
        <lightning:layoutItem size="3" padding="around-small">
            <div >
                <img aura:id="imgOver" class="" src="/resource/Mouseover/" onmouseover="{!c.UpdateColor}"  />
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

javaScript
({
    UpdateColor : function(component, event, helper){
        var img = component.find('imgOver');
          $A.util.addClass(img,'orangeColor');
    },
})
CSS
.THIS .orangeColor{
    background-color:orange;
}
Thanks, let us know if it helps you
http://sfdcMonkey.com




 
This was selected as the best answer
Hemant_SoniHemant_Soni
Hi,
Please try below one.
=============================Component=====================================
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:layout >

                                    <lightning:layoutItem size="3" padding="around-small">
                                        <div >
                                            <img aura:id="imgOver" class="RedColor" style="height: 500px;" src="/resource/Mouseover/" onmouseover="{!c.UpdateColor}"  /></div>
                                         
                                    </lightning:layoutItem>
    </lightning:layout>
</aura:component>
=============================Controller.Js=====================================
({
    UpdateColor : function(component, event, helper){
var img = component.find('imgOver');
if($A.util.hasClass(img,'RedColor')){
$A.util.removeClass(img,'RedColor');
}else{
$A.util.addClass(img,'RedColor');
}
}
})
===========CSS=================


.THIS .RedColor{
background-color:red;
}
Thanks