mouseover event is not firing on element on which written

Question

<tr onmouseover="{!c.showEditIcon}"> 
    <td colspan="2">   
        <c:DFActivityCardCmp activity="{!activity}" uiThemeDisplayed="{!v.uiThemeDisplayed}"/> 
    </td>
    <td class="vertical-align-center">
        <div class="slds-align--absolute-center"> 
            <i aura:id="editIcon" class="fa fa-pencil slds-hide" aria-hidden="true"></i>
        </div>                      
    </td>
</tr>

//controller method

 showEditIcon : function(component, event, helper) { 
    console.log(event.target); 
}

When hovered on <tr>, console(event.target) is printing the object of children of <tr>. When hovered on I want to remove the class 'slds-hide' of tag. Since I am not getting <tr> object on hover, I am not able to get the object of <i>. Hence, I am unable to do DOM manipulation.

Answer 1

I found the solution. I used mouseenter event instead of mouseover and it worked.