You need to sign in to do that
Don't have an account?
venkat 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:
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:
try following code :
javaScript CSS Thanks, let us know if it helps you
http://sfdcMonkey.com
All Answers
Please try below code. Thanks
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
try following code :
javaScript CSS Thanks, let us know if it helps you
http://sfdcMonkey.com
Please try below one. Thanks