Find exact mouse hovered element in jquery

Event.target[^] returns the element which triggered the event. If your mouse is over one of the <a> tags, then that will be the target.

Event.currentTarget[^] returns the element to which the handler was attached. If you attached an event handler to the <td> element, then currentTarget would always return the <td> element, even if your mouse was over a child element.

The target will never return the <span>, since there's no way for the mouse to be over the <span> without also being over an <a>.

Instead, you will need to use the target property to get the <a>, and walk up the DOM tree until you find the <span>.

For example, using jQuery:

$(document).on("mouseover", "td", function(e){
    var className = $(e.target).closest("span").prop("class");
    ...
});

Demo[^]