In Gmail, if you clicked to select a message, this will show a bar on top of the messages table, to perform mass actions on the selected messages (please see the attached GIF photo).

I'm trying to click the delete icon at this bar, but, I can't do that, because, its markup changes once you hover it.

Its first draw at the DOM is like this:

<div class="T-I J-J5-Ji nX T-I-ax7 T-I-Js-Gs mA" act="10" title="Delete" role="button" tabindex="0">
    <div class="asa">
        <div class="ar9 T-I-J3 J-J5-Ji"></div>
    </div>
</div>

And once you manually hover it, it changes to be like this:

<div class="T-I J-J5-Ji nX T-I-ax7 T-I-Js-Gs mA" act="10" role="button" tabindex="0" data-tooltip="Delete" aria-label="Delete" style="user-select: none;">
    <div class="asa">
        <div class="ar9 T-I-J3 J-J5-Ji"></div>
    </div>
</div>

To select it, I use its first markup, like this:

let $delBtn1 = $('[title="Delete"]'); 
let $delBtn2 = $('[data-tooltip="Delete"]');

But, I can't perform the click at it and make it trigger its onclick function, because, I guess it listens to the onclick event AFTER a manual hover at it first.

How can I trigger the manual hover at it then trigger a click?

I tried to do:

$($delBtn1).mouseenter(); 
$($delBtn1).trigger('mouseenter');
$($delBtn1).mouseover(); 
$($delBtn1).trigger('mouseover');
$($delBtn1).mouseup(); 
$($delBtn1).mousedown(); 
$($delBtn1).focus();
$($delBtn1).select();

None of this worked!

Even tried to wait:

$($delBtn1).mouseenter();
setTimeout(function () {
    $($delBtn2).click();
}, 1000);

I'm trying this through a Chrome extension and through the console, and both doesn't work!

Any direction how can I trigger its onclick function?