0

I recently created my first custom Lightning component that will open up a link when you hover over an image. It works fine, but how do I get the arrow to turn into a pointer when I hover over the image so the user knows it is clickable? I think this needs to be done inside the controller with JavaScript. I tried using CSS in the controller and it didn't work.

Here is my code:

Component:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <div class="slds-align_absolute-center" style="width:70%;" onclick="{! c.openPowerBI }">   
        <img src="{!$Resource.PowerBILogo}" class="pointer"/>
    </div
</aura:component>>

Controller:

({    
    openPowerBI : function(component, event, helper) {
         window.open("https://powerbi.microsoft.com/en-us/"); 
      }  
    
})
1
  • You neglected to include the CSS? – sfdcfox Mar 17 at 22:34
1

Technically, the easiest way to get the pointer is to use a link:

<a class="slds-align_absolute-center" href="#" style="width:70%;" onclick="{! c.openPowerBI }">   
  <img src="{!$Resource.PowerBILogo}" />
</div

openPowerBI : function(component, event, helper) {
  window.open("https://powerbi.microsoft.com/en-us/"); 
  event.preventDefault();
}

The CSS should also work:

.THIS .pointer {
  cursor: pointer;
}

Note that Aura is a bit tricky with the CSS, you need to learn when to use a space after .THIS (or not).

Namely, if the element is directly descended from aura:component, you do not use a space, but if it has any parent elements, then you do.

4
  • Thanks. That didn't work for me. I am not sure if it is because the controller has javascript in it, or whether I am not inserting it in the right way. It is giving me this error: Failed to save openPowerBIController.js: c.openPowerBI: Failed to parse CONTROLLER for js://c.openPowerBI: org.auraframework.util.json.JsonStreamReader$JsonStreamParseException: Expected ':' [5, 11]: '.pointer': Source – Mark V Mar 18 at 0:05
  • @MarkV You need to do that in the STYLES section, not the CONTROLLER. – sfdcfox Mar 18 at 0:07
  • Thank you! That worked. I am very new to this. I wasn't even aware there was a separate styles section. I appreciate your help! – Mark V Mar 18 at 0:21
  • @MarkV you're welcome! – sfdcfox Mar 18 at 0:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.