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
Katie SilorioKatie Silorio 

Mouseover icon on lightning component

This is probably a super simple question... I built a lightning component that consists of images and direct you to different pages when you click on them. 
User-added image

The buttons work fine, but the cursor doen't change to a pointer icon when you hover over the image. Please help me update my code:

Component
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
    <div class="c-container">
        <div class="slds-grid slds-grid_align-center">
            <div class="slds-col slds-p-right_xx-large" onclick="{!c.startNewApplication}">
                <img src="{!$Resource.LexPartnerPortalCreateNCA}"/>
            </div>
            <div class="slds-col slds-p-right_xx-large" onclick="{!c.createLendingCircle}">
                <img src="{!$Resource.LexPartnerPortalCreateLC}"/>
            </div>
        </div>
    </div>
</aura:component>

Controller
({
    startNewApplication : function (cmp, event, helper) {
        window.location.href = '/lightningPartners/PublicClientApplication';
    },

    createLendingCircle : function (cmp, event, helper) {
        window.location.href = '/lightningPartners/partnercreatelendingcircle';
    },

    submitACase: function (cmp, event, helper) {
        window.location.href = '/lightningPartners/s/createrecord/NewCase';
    }
})
Best Answer chosen by Katie Silorio
Maharajan CMaharajan C
Hi Katie,

Add the below changes in Component and add the CSS on bundle Style.

Component:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <div class="c-container">
        <div class="slds-grid slds-grid_align-center">
            <div class="slds-col slds-p-right_xx-large" onclick="{!c.startNewApplication}">
                <img src="{!$Resource.LexPartnerPortalCreateNCA}" class="pointer"/>
            </div>
            <div class="slds-col slds-p-right_xx-large" onclick="{!c.createLendingCircle}">
                <img src="{!$Resource.LexPartnerPortalCreateLC} class="pointer"/>
            </div>
        </div>
    </div>
</aura:component>


===========

In Style add the below CSS:

.THIS .pointer{
    cursor: pointer;
}



Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi Katie,

Add the below changes in Component and add the CSS on bundle Style.

Component:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <div class="c-container">
        <div class="slds-grid slds-grid_align-center">
            <div class="slds-col slds-p-right_xx-large" onclick="{!c.startNewApplication}">
                <img src="{!$Resource.LexPartnerPortalCreateNCA}" class="pointer"/>
            </div>
            <div class="slds-col slds-p-right_xx-large" onclick="{!c.createLendingCircle}">
                <img src="{!$Resource.LexPartnerPortalCreateLC} class="pointer"/>
            </div>
        </div>
    </div>
</aura:component>


===========

In Style add the below CSS:

.THIS .pointer{
    cursor: pointer;
}



Thanks,
Maharajan.C
This was selected as the best answer
Katie SilorioKatie Silorio
Hi Maharajan,

This worked! Thank you so much!

Katie
Sfdc CoupleSfdc Couple
Hi @Katie,

Yes you are right. Its just css. Please find the below code:
  
Component:
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
    <div class="c-container">
        <lightning:button label="hi" />
        <div class="slds-grid slds-grid_align-center">
            <div class="myclass" onclick="{!c.startNewApplication}">
                <img src="{!$Resource.LexPartnerPortalCreateNCA}"/>
            </div>
            <div class="myclass" onclick="{!c.createLendingCircle}">
                <img src="{!$Resource.LexPartnerPortalCreateLC}"/>
            </div>
        </div>
    </div>
</aura:component>

Style:

.THIS .myclass img:hover {
 background: blue; 
    cursor: pointer;
}

Please let us know if you have any queries. 

Enjoy Coding!!!!!

Thanks,
SfdcCouple

Reach us @ sfdccouple@gmail.com