function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Harsh GupHarsh Gup 

lightning box

Hi Team,

I am displaying multiple slds box in my component. I want to highlight that box on which the mouse is pointing. I' using onmouseover event but it's not working. 
Component:

 <aura:iteration items="{!v.result}" var="resultPartner">
                        <div class="slds-box slds-theme_shade" style="width: 100%; " onmouseover="{!c.Updatebackground}" aura:id = "background">
                        <div class= "slds-text-heading_medium" style = "color: blue; padding: inherit;"> {!resultPartner.Name} </div>
                        <div style = "padding: inherit;"> {!resultPartner.Address} </div>
                        
       
                        </div>
                    </aura:iteration>

Controller:
Updatebackground : function(component , event, helper){
    var img = component.find('background');
          $A.util.addClass(img,'color');
},

CSS:

.THIS .color{
        border-color: blue;
}


 
David Zhu 🔥David Zhu 🔥

You may implement this by enhancing your code by followings.
1. In Apex code, you need to unique Id in Result Class.
If you have a unique Id, let's say the field is called "recordId". you can skip step 1.
If you don't have one, you can add a unique id to Result class .  let's call it counter:

@AuraEnabled  
Integer counter {get;set;}
When populating result, assign counter for each record starting from 0.


2. In HTML
With unique Id "recordId"
<div class="slds-box slds-theme_shade" style="width: 100%; " onmouseover="{!c.Updatebackground}" aura:id = "background" id="{!resultPartner.recordId}">

with "counter"
<div class="slds-box slds-theme_shade" style="width: 100%; " onmouseover="{!c.Updatebackground}" aura:id = "background" id="{!resultPartner.counter}">


3. in JS controller:
Updatebackground : function(component , event, helper){
        let selectedId= event.currentTarget.getAttribute("id");
        let img = component.find('background');
        for (let x in img)
        {
            if (selectedId ==  img[x].getElement().id)
            {
                $A.util.addClass(img[x],'color');
            }
            else
            {
                $A.util.removeClass(img[x],'color');
            }
        }

},