How do I change to a pointer when I hover over a custom lightning component?

Question

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/"); 
      }  
    
})

Answer 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.